拷貝工程師

前言:

最近上班遇到系統需求要做照片的批次上傳，因為以前做過一些Win Form小工具，

其中一個照片工具是做裁切、壓縮、浮水印再選擇要的照片格式最後存在特定位置，

只不過這次轉成Web Form應該不會太難才是，但是果然不是憨人想的那麼簡單。

因為公司系統的web config中設定了最大傳輸只能是4MB，也就導致如果超過4MB肯定是會失敗的!

這時候我想那我就在前端拆成一個一個檔案分次上傳就好啦!

 

首先我們先在要上傳檔案的頁面準備好上傳的Input與訊息框吧!(用Html的<input type='file' />也可以喔)

<asp:FileUpload class="form-control" ID="fileImages" Multiple="Multiple" runat="server" />

<ul id="uploadMsg"></ul>

 

 

接著就是準備接入一個Web Form來當接受資料的頁面。

先新增好aspx頁面，就可以在Page_Load撰寫程式啦! 

注意:在Web Form回傳值跟Web Service的寫法不同，

Web Service使用 Return，

Web Form使用 Response.Write，

一開始抓不到回傳值害我以為我寫錯，Debug半天..........

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 If HttpContext.Current.Request.Files.Count > 0 Then '有傳輸檔案
            Dim bln As Boolean
            bln = UpdPic() '上傳照片
            If bln = True Then
                Response.Write(HttpContext.Current.Request.Files(0).FileName + " 上傳成功!")
                Response.End()
            Else
                Response.Write(HttpContext.Current.Request.Files(0).FileName + " 上傳失敗!")
                Response.End()
            End If
 End If
End Sub


Public Shared Function UpdPic() As Boolean
        Dim pic() As Byte = Nothing 'buffer

            '取出檔案
        Dim file = HttpContext.Current.Request.Files(0)
           '檔案名稱
        Dim name As String = System.IO.Path.GetFileNameWithoutExtension(file.FileName)
       
        '轉成bpm縮放圖片大小
        Dim ii As Image = Image.FromStream(file.InputStream)
        Dim bp As Bitmap = New Bitmap(ii, 1280, 980)
        Dim ms As New System.IO.MemoryStream
            '轉成jpg格式
        bp.Save(ms, Imaging.ImageFormat.Jpeg)
        pic = ms.GetBuffer
            
        Dim bln As Boolean = '把pic存入SQL SERVER 內我就不寫，交給各位自行處理吧
            Return bln

    End Function

解著就是要撰寫AJAX與FormData啦

(其實在後來我才知道原來FormData就是把頁面上想要的資料包成Form傳送，所以跟一般寫Web Service稍微不同)

$('#<%=fileImages.ClientID %>').change(function() {
       
        //抓出檔案
        var input = document.querySelector('input[type=file]'),
                       file;
        //非圖片不傳送
        for (var i = 0; i <= input.files.length - 1; i++) {
            file = input.files[i];
            if (!file || !file.type.match(/image.*/)) {
                alert(file.name + ": 非圖片格式")
                return;

            }
        }
        $("#uploadMsg li").remove();
        for (var i = 0; i <= input.files.length - 1; i++) {
            file = input.files[i];


            var formData = new FormData();
            formData.append("id", $("#formID").val());
            formData.append("file", file);

            var index = 1;

            $.ajax({
                type: "POST",
                url: "url",
                data: formData,
                //dataType: "json",
                contentType: false,
                processData: false,
                success: function(data) {
                    //$("#uploadMsg").text("已傳送 " + i + " 個檔案");
                    //alert(data);
                    if (data.indexOf("上傳失敗") > 0) {
                        $("#uploadMsg").append("<li><strong style='color:red;'>" + index + ". " + data + "</strong></li>");
                    } else {
                        $("#uploadMsg").append("<li><strong>" + index + ". " + data + "</strong></li>");
                    }
                    index = index + 1;
                },
                error: function(err) {
                    alert(file.name + " :上傳期間發生錯誤!");
                    console.log("err:");
                    console.log(err);
                }
            });

        }

        })

完成品就是這樣啦!