H5前端上传文件的几个解决方案

目前，几个项目中用到了不同的方法，总结一下分享出来。

第一种，通过FormData来实现。

首先，添加input控件file。

<input type="file" name="uploadFile1" id="uploadFile1" runat="server" value="" multiple accept="image/jpg,image/jpeg,image/png,image/bmp,video/*"/>

然后添加对应的前端代码。

var input = document.getElementById("uploadFile");

    var getOnloadFunc = function (aImg) {
        return function (evt) {
            aImg.src = evt.target.result;
        };
    }
    input.addEventListener("change", function (evt) {
        for (var i = 0, numFiles = this.files.length; i < numFiles; i++) {
            var file = this.files[i];

            var img = document.createElement("img");
            $(".tp").append(img);

            var reader = new FileReader();
            reader.onload = getOnloadFunc(img);
            reader.readAsDataURL(file);

            alert(file.name);

            var fd = new FormData();
            // 直接传递file对象到后台
　　　　　　　fd.append("image", file);
            fd.append("guanId", $("input[name=commonGuanId]").val());

            $.ajax({
                url : '/tools/submit_ajax.ashx?action=sign_upload',
                type : 'POST',
                data : fd,
                processData: false,
                contentType: false,
                timeout : 10000,
                success : function(data) {
                    var mydata = JSON.parse(data);
                    
                    if (mydata.status == 1) {
                        alert("上传成功");
                    } else {
                        alert("失败，请稍后重试！");
                        
                    }
                },
                error : function(xhr,textStatus){
                    //alert('上传失败，请稍后重试');
                    
                }
            });
        }
    }, false);

第二个，微信JSSDK接口，这个用起来比较方便，但是必须在微信的环境中应用，有局限性。

 wx.config({
        debug: false,
        appId: '<% = config.appId%>',
        timestamp: '<% = config.timestamp%>',
        nonceStr: '<% = config.nonceStr%>',
        signature: '<% = config.signature%>',
        jsApiList: ['chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage'
        ]
    });


    var serverIds = ""
    function uploadImg() { 
        if(serverIds!="")
        {
            serverIds="";
        }
        wx.chooseImage({
            count: 1,
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
            sourceType: ['album', 'camera'],      // 可以指定来源是相册还是相机，默认二者都有  
            success: function (res) {
                var localIds = res.localIds;      // 返回选定照片的本地ID列表  
                syncUpload(localIds);             // localId可作为img标签的src属性显示图片  
            }
        });
    }

    function syncUpload(localIds) {
        var localId = localIds.pop();
        wx.uploadImage({
            localId: localId,                // 需要上传的图片的本地ID，由chooseImage接口获得  
            isShowProgressTips: 1,           // 默认为1，显示进度提示  
            success: function (res) {
                var serverId = res.serverId; // 返回图片的服务器端serverId  
                serverIds = serverIds + serverId + ",";

                if (localIds.length > 0) {
                    syncUpload(localIds);
                } else {
                    $.ajax({
                        type: "POST",
                        url: "/tools/submit_ajax.ashx?action=img_upload",
                        dataType: "json",
                        data: {
                            "serverIds":serverIds
                        },
                        timeout: 20000,
                        success: function (data, textStatus) {
                            if(data.status==1){
                                $("#picname").attr("src", data.msg);
                                $("#hidImgUrl").attr("value",data.msg);
                            }else{
                                alert(data.msg);
                            }
                        },
                        error:function(data){
                            alert("系统错误，请刷新页面重试！");
                        }
                    });
                }
            }
        });
    };