利用createobjectUrl图片预览以及上传

步骤1：创建一个表单

<form class="form-horizontal" id="uploadForm" enctype="multipart/form-data"><div class="form-group">    <label for="Email" class="col-sm-2 control-label">Email</label>    <div class="col-sm-10">        <input type="email" class="form-control" id="Email" name="Email">    </div></div><div class="form-group"><label for="pic" class="col-sm-2 control-label">file input</label><div class="col-sm-10"> <input type="file" id="upload" class="btn" onchange="getFullPath(this)" name="file" multiple="multiple" /> </div> </div> <div class="form-group"> <label for="pic" class="col-sm-2 control-label invisible ">file input</label> <div class="col-sm-10" id="imgHolder"> </div> </div><div class="form-group"> <label for="job" class="col-sm-2 control-label  ">job</label> <div class="col-sm-10" id="job" >    <input type="checkbox" value="1" name="job"/>总经理    <input type="checkbox" value="2" name="job"/>销售经理    <input type="checkbox" value="3" name="job"/>项目经理 </div></div><div class="form-group">    <div class="col-sm-12">        <input type="button" id="sub" class="btn btn-primary center-block" value="submit">    </div></div></form>

注意：这里是多文件预览和上传，所以在file元素后面要有multiple=”multiple”

步骤2：利用createObjectUrl预览以及ajax上传

1. 获取图片在div中预览显示

var fileList = [];function getFullPath(obj){    var file=document.getElementById("upload");    var newFileList=file.files;// 获取的图片文件    newFileList = validateUp(newFileList);    if (newFileList.length <= 0) {        return false;    }    for(var i = 0; i < newFileList.length; i++){        //这里try catch 是为了防止苹果浏览器 5.17  因为苹果浏览器不支持createobjecturl        try{            var url=window.URL.createObjectURL(newFileList[i]);        }        catch(err){        }finally{            fileList.push(newFileList[i]);            var tdHtml="<div style='position:relative;float:left' onmouseover='showX(this)'  onmouseout=' hideX(this)'>";            //这里 ./static 的 . 表示根路径             tdHtml+="<img src='./static/image/a7.png' alt='123456464774' style='z-index:100;position:absolute;top:5px;right:0px;display:none'  onclick=\"delPic(this,'"                    +newFileList[i].name+"')\"/>";            tdHtml += "<img class='spPic' src='" + url + "' width='100px' height='100px'>";            tdHtml += "</div>";            $("#imgHolder").append(tdHtml);        }    }}

我想这里的fileList变量有人可能会有疑问，为什么要设置这个变量。主要是为了上传图片用的。下面会仔细说明的
2.函数validateUp（）代码
这个函数主要用来验证图片是否符合要求的

var defaults = {    fileType : [ "jpg", "png", "bmp", "jpeg", "JPG", "PNG", "BMP", "JPEG" ], // 上传文件的类型    fileSize : 1024 * 1024 * 10// 上传文件的大小 10M};

function validateUp(files) {    var names = [];    for (var j = 0; j < fileList.length; j++) {        names.push(fileList[j].name);    }    var arrFiles = [];// 替换的文件数组    for (var i = 0, file; file = files[i]; i++) {        // 获取文件上传的后缀名        var newStr = file.name.split("").reverse().join("");        if (newStr.split(".")[0] != null) {            var type = newStr.split(".")[0].split("").reverse().join("");            if (jQuery.inArray(type, defaults.fileType) > -1) {                // 类型符合，可以上传                if (file.size >= defaults.fileSize) {                    parent.layer.msg(file.size);                    parent.layer.msg('您这个"' + file.name + '"文件大小过大');                } else {                    // 在这里需要判断当前所有文件中                    if ($.inArray(file.name, names) == -1) {                        arrFiles.push(file);                    } else {                        parent.layer.msg('您这个"' + file.name + '"图片已经存在');                    }                }            } else {                parent.layer.msg('您这个"' + file.name + '"上传类型不符合');            }        } else {            parent.layer.msg('您这个"' + file.name + '"没有类型, 无法识别');        }    }    return arrFiles;}

说明：这里弹出框是利用layer插件。
3.删除预览图片功能

//鼠标移动到图片上时，右上角显示关闭按钮   function showX(o){        $(o).find('img:first').css('display','block');}//当鼠标移开，隐藏右上角关闭按钮function hideX(o) {    $(o).find('img:first').css('display', 'none');}//删除图片function delPic(o,name){    layui.use('layer', function(){          var layer = layui.layer;          layer.confirm('你确定要删除该图片吗？',{                btn:['确定','取消'],                shade:false                //不显示遮罩            },function(index){                      for(var i=0,file;file=fileList[i];i++){                    if (file.name == name) {                        fileList.splice(i, 1);                        //删除下标为i的图片                        var parent=document.getElementById("imgHolder");                        var div=parent.getElementsByTagName("div");                        parent.removeChild(div[i]);                                 break;                    }                }                layer.close(index);            })        });   }

这里的删除是移除div里的图片 不是真正的从file元素里删除。因为file元素是只读元素。
4.提交表单
这里我利用formData来获取表单的数据

//提交$(function(){    $("#sub").click(function(){        //event.preventDefault();        formSubmit();    })})function formSubmit(){    //如果是多图片的话，这种形式formdata只能获取到最后一张图片。所以要用到下面的for循环。将其他图片放入到formdata中    //var data=new FormData($("#uploadForm")[0]);    //这个 length-1 是因为在上一句初始化formdata时，已经把最后一张图片放入formdata中了     //但是如果 之前选中了 图片 之后又删除了(这个删除是无法真正从input file里删除的，仍然会在上一句的初始化中获取到图片)    //所以 不建议这种写法     /*for (var i = 0; i < fileList.length-1; i++) {        if (fileList[i] != null) {            data.append("file", fileList[i]);        }    }*/    //先将input file清空    var file=document.getElementById("upload");    file.value="";    var data=new FormData($("#uploadForm")[0]);    for (var i = 0; i < fileList.length; i++) {        if (fileList[i] != null) {        // 这里的名字要和file元素的name值不同，如果相同的话，上传之后会多出来一个0kb的文件                data.append("files", fileList[i]);        }    }    //data.append("Email","345");    //var email=data.get("Email");    $.ajax({        type:"post",        url:'./emp2',        data : data,        processData : false,        contentType : false,        success : function(data) {            //alert("success");            location.reload();        },        error : function(e) {            alert(e.responseText);        }    })}

看了我上面的注释可以知道 formdata只能获取一张图片（FormData中的属性值接受的是单个文件信息，不能是复合性的对象）。前面我们的变量fileList就是把所要要上传的图片获取到 然后赋值给formData. 最后利用ajax上传图片
注意： processData : false, contentType : false,这个很重要。一定要写上去。这两个是告诉jq 不要去处理发送的数据和不要去设置Content-Type请求头
具体细节参考这篇博客，说的比我仔细（这位博主应该是前端大牛）：http://www.cnblogs.com/imwtr/p/5924042.html#3530655

步骤3：java后台接收

接收之前 要有相应的上传包。还要在配置里写上相关的bean。如下：

<!--这里的属性有很多 可以按照自己的要求写 --><bean id="multipartResolver"           class="org.springframework.web.multipart.commons.CommonsMultipartResolver">        <property name="maxUploadSize">            <value>-1</value>        </property>        <property name="defaultEncoding">            <value>UTF-8</value>        </property></bean><!--在maven的pom.xml里粘贴这个就行了--><dependency>    <groupId>commons-fileupload</groupId>    <artifactId>commons-fileupload</artifactId>    <version>1.3.2</version></dependency>

后台接收代码

@ResponseBody    @RequestMapping(value="/emp2",method= RequestMethod.POST)    public Msg testFormAdd(HttpServletRequest req,            @RequestParam("files") MultipartFile[] file) throws IOException, ServletException{        String email= req.getParameter("Email");        String job=req.getParameter("job");        fileUpload(req,file);        System.out.println("ok"+email);        return Msg.success();    }    public void fileUpload(HttpServletRequest req, MultipartFile[] file) throws IOException {        for(MultipartFile item : file){            String fileName=item.getOriginalFilename();            //获取输出流            OutputStream os=new FileOutputStream("E:/"+new Date().getTime()+fileName);            //获取输入流            InputStream is=item.getInputStream();            int temp;            //一个一个字节的读取并写入            while((temp=is.read())!=-1){                os.write(temp);            }            os.flush();            os.close();            is.close();        }    }

注意：file元素的name是file，formdata里的fileList的key是files.所以接收的也是files.如果后台你写的是file，接收到的就是0kb的文件了。
后台文件接收方式有多种，我这里用的是流。具体的可以看一下这个博客：
http://www.cnblogs.com/fjsnail/p/3491033.html。
里面有接收方式的对比。

最后，如果想要看我的具体代码，github网址：
https://github.com/liufitch/ssm_crud/blob/master/src/main/webapp/static/js/test.js

写的不好。请多指教。。。