jquery 上传多张图片并显示（快跑中国）

 

1.form表单

<form class="inpform" id="uploadForm" enctype="multipart/form-data">
<input type="file" id="file" multiple="multiple" name="file"
                               onchange="xmTanUploadImg(this)"/>
<form>

1.图片回显

onchange事件是回显图片

 //显示选择的图片
        function xmTanUploadImg(obj) {
            var fl = obj.files.length;
            for (var i = 0; i < fl; i++) {
                var file = obj.files[i];
                //FileReader用来把文件读入内存，并且读取文件中的数据。
                // FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。
                var reader = new FileReader();
                //读取文件过程方法
                reader.onload = function (e) {
                    //不太明白e.target.result代表什么（一大串数字）好像是图片转化为base64
                    var imgstr = '<img  style="width:77px;height:77px;" src="' + e.target.result + '"/>';
                    $("#img-follow").append(
                        "<div class=\"img\">" +
                        "<div class=\"img-bg\">" +
                        "" + imgstr + "" +
                        "</div>" +
                        "<div class=\"img-center\">" +
                        "<img src=\"../img/Close button.png\" id=\"img-close\"/>" +
                        "</div>" +
                        "</div>"
                    )
                };
                //读取文件内容，结果用data:url的字符串形式表示
                reader.readAsDataURL(file);
            }

        }

当用户得到imgstr时其实就是得到图片的img ,将img插入到所需要的div里面

2.图片上传

1.格式化表单

var formData = new FormData($("#uploadForm")[0]);

2.将所需的其他数据加在formData里面

formData.append("diaryContent", content);
            formData.append("topicId", topicId);

3.ajax上传数据

注意：上传数据的时候有几个ajax的参数需要改变

• processData设置为false。因为data值是FormData对象，不需要对数据做处理。
• <form>标签添加enctype="multipart/form-data"属性。
• cache设置为false，上传文件不需要缓存。
• contentType设置为false，不设置contentType值，因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。

上传后，服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为<input>中声明的是name="file"。

 $.ajax({
                type: "post",
                url: "/logH/addDiary",
                data: formData,
                async: false,
                contentType: false,// jQuery不要去设置Content-Type请求头
                processData: false,// jQuery不要去处理发送的数据
                success: function (result) {
                    alert("success!");
                }
            })

        }