Wills's blogs

Ajax图片上传与图片预览方法

发表于 | 分类于 |
  1. H5—xhr2（XmlHttpRequest level 2）上传
    xhr2的特点:
  • 可以设置HTTP请求的时限。
  • 可以获取服务器端的（或向服务端发送）二进制数据。
  • 可以使用FormData对象管理表单数据。
  • 可以上传文件。xhr.upload(upload = XMLHttpRequestUpload)
  • 可以获得数据传输的进度信息, xhr.upload.onprogess。
  • 可以请求不同域名下的数据（跨域请求）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/**
 * 上传图片
 * @param {string} type input[file]的name值
 */
function uploadImg(type){
    
    var formData= new FormData();
    formData.append("from", "expert");
    formData.append("debug", "1");
    formData.append("expertId", "1");
    var picFileList = $("#" + type).get(0).files;
    for(var i=0; i< picFileList.length; i++){
        formData.append(type , picFileList[i] );
    }
     
    var xhr = new XMLHttpRequest();
     
    xhr.open("POST", requestUrl + "/expert/updatePicA");
    xhr.onreadystatechange = function(){
        var XMLHttpReq = xhr;
        if (XMLHttpReq.readyState == 4) {
            if (XMLHttpReq.status == 200) {
                var text = XMLHttpReq.responseText;
                eval("rt=" + text);
                if(rt.error!==""){
                    alert(rt.error);
                }else{
                    alert("操作成功");
                    window.location.reload()
                }
            }
        }
    };
    xhr.send(formData);
}

xhr2在结合H5的其他特性，可以实现上述flash上传的所以功能外，还可以实现拖拽上传功能。

由于诸多HTML5特性（Blob ,xhr2,FileReader,ArrayBuffer等）在IE10+中才有效，
所以xhr2上传更适合在chrome，firefox等高版本的浏览器或和移动端使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//  预览图片
    function seeImg(el,imgBox){
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
        el.on("change",function(){
            var objUrl = getObjectURL(el[0].files[0]) ;
            if (objUrl) {
                imgBox.attr("src", objUrl);
                imgBox.attr("class", "fileImg");
            }
            el.parent().find(".register-file-val").text(el.val());
        })
    }

使用jquery:

1
2
3
4
5
<form id= "uploadForm">
      <p >指定文件名： <input type="text" name="filename" value= ""/></p >
      <p >上传文件： <input type="file" name="file"/></ p>
      <input type="button" value="上传" onclick="doUpload()" />
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function doUpload() {
    var formData = new FormData($( "#uploadForm" )[0]);
    $.ajax({
        url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (returndata) {
            alert(returndata);
        },
        error: function (returndata) {
            alert(returndata);
        }
    });
}

可参考：
https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects

https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects