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("系統錯誤，請刷新頁面重試！");
                        }
                    });
                }
            }
        });
    };