我是如何一步步編碼完成萬倉網ERP系統的（七）產品庫設計 3.品牌圖片跨域上傳

　　https://www.cnblogs.com/smh188/p/11533668.html（我是如何一步步編碼完成萬倉網ERP系統的（一）系統架構）

　　https://www.cnblogs.com/smh188/p/11534451.html（我是如何一步步編碼完成萬倉網ERP系統的（二）前端框架）

　　https://www.cnblogs.com/smh188/p/11535449.html（我是如何一步步編碼完成萬倉網ERP系統的（三）登陸）

　　https://www.cnblogs.com/smh188/p/11541033.html（我是如何一步步編碼完成萬倉網ERP系統的（四）登陸的具體實現）

　　https://www.cnblogs.com/smh188/p/11542310.html（我是如何一步步編碼完成萬倉網ERP系統的（五）產品庫設計 1.產品類別）

　　https://www.cnblogs.com/smh188/p/11546917.html（我是如何一步步編碼完成萬倉網ERP系統的（六）產品庫設計 2.百度Ueditor編輯器）

　　https://www.cnblogs.com/smh188/p/11572668.html（我是如何一步步編碼完成萬倉網ERP系統的（七）產品庫設計 3.品牌圖片跨域上傳）

　　https://www.cnblogs.com/smh188/p/11576543.html（我是如何一步步編碼完成萬倉網ERP系統的（八）產品庫設計 4.品牌類別）

　　https://www.cnblogs.com/smh188/p/11578185.html（我是如何一步步編碼完成萬倉網ERP系統的（九）產品庫設計 5.產品屬性項） 

　　https://www.cnblogs.com/smh188/p/11589264.html（我是如何一步步編碼完成萬倉網ERP系統的（十）產品庫設計 6.屬性項和類別關聯） 

　　https://www.cnblogs.com/smh188/p/11596459.html（我是如何一步步編碼完成萬倉網ERP系統的（十一）產品庫設計 7.發佈商品） 

　　https://www.cnblogs.com/smh188/p/11610960.html（我是如何一步步編碼完成萬倉網ERP系統的（十二）庫存 1.概述） 

　　https://www.cnblogs.com/smh188/p/11669871.html（我是如何一步步編碼完成萬倉網ERP系統的（十三）庫存 2.加權平均價） 

　　https://www.cnblogs.com/smh188/p/11763319.html（我是如何一步步編碼完成萬倉網ERP系統的（十四）庫存 3.庫存日誌） 

　　萬倉網ERP系統不開源，準備作一個系列，講一講主要的技術點，這些技術點會有源代碼。若是想看全部的源代碼，能夠打道回府了，不必再閱讀下去了，浪費您寶貴的時間。

　　上一篇說到了百度的Ueditor編輯器，着重說到了如何用Ueditor編輯器跨域上傳圖片，這一篇接着講普通的跨域上傳圖片。跨域上傳，按照之前的作法寫一個web service程序放到圖片服務器上，後臺系統調用web service把圖片上傳到圖片服務器。這種方法好很差呢？能夠，徹底沒問題，最終的目的達到了。今天我們新闢一種方法，用Jquery+普通的上傳程序達到跨域上傳的效果（只支持FormData屬性的瀏覽器，例如IE10+、Firefox、Chrome等，不支持IE10如下的瀏覽器，作測試時須要注意）。

 

　　先看看京東的購物網站吧，作個參考。以手機爲例，品牌都是以品牌Logo圖片來展現，並非以文字的方式展現。如今我們就以品牌圖片的跨域上傳來作示例說明。

　　固然首先你須要構建一個品牌的編輯頁面，有品牌編碼、品牌名稱、品牌英文名、品牌描述等等吧。今天的主題，最重要的品牌Logo別忘了，構建完頁面大概是下面這個樣子。

　　跨域上傳涉及到3個角色，一個是後臺系統，二是上傳程序，三是圖片網站，作測試時，能夠在同一個電腦上作測試，但須要3個不一樣的域名。

　　1.在後臺系統頁面，聲明兩個兩個標籤，一個input標籤，type="file"類型，過濾一下上傳圖片的格式，另外一個是label標籤，這兩個標籤的外層須要套一個form標籤，而且enctype="multipart/form-data"。

<form enctype="multipart/form-data">
        <input type="file" id="txtBrandLogo" accept="image/gif,image/jpeg,image/jpg,image/png,image/webp">
        <label id="lblBrandLogo" for="txtBrandLogo">上傳logo</label>
</form>

　　2.在後臺系統頁面，獲取當前用戶的cookie和session，用於jquery跨域上傳時，帶上當前用戶的cookie和session信息。

    <script>//cookie
        var auth = "@Request.Cookies[FormsAuthentication.FormsCookieName].Value";
        //session
        var ASPSESSID = "@Session.SessionID";
    </script>

　　3.在後臺系統頁面，jquery上傳圖片代碼

<script>
    $("#txtBrandLogo").on("change", function (e) {if (window.FormData !== undefined) {
            var file = e.target.files[0]; //獲取圖片資源
            // 判斷圖片格式
            if (!file.type.match('image/jpeg') && !file.type.match('image/jpg') && !file.type.match('image/png') && !file.type.match('image/gif') && !file.type.match('image/webp')) {
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file); // 讀取文件
            reader.onload = function (arg) {
　　　　　　　　　 //預覽圖片 var img = '<img class="preview" src="' + arg.target.result + '"/>';
                $(".preview_box").empty().append(img);
            }
            var data = new FormData();
            data.append("FileUpload", $("#txtBrandLogo").prop("files")[0]);
            data.append("ASPSESSID", ASPSESSID);
            data.append("AuthCookie", auth);
            $.ajax({
                type: "POST",
　　　　　　　　　 //上傳程序Url
                url: "https://imgupload.vancang.com/Products/UpdateBrandLogo",
                contentType: false,
                processData: false,
　　　　　　　　　　//跨域
                crossDomain: true,
                data: data,
                beforeSend: function (xhr) {
　　　　　　　　　　   //攜帶cookie和session
                    xhr.withCredentials = true;
                },
                success: function (result) {
　　　　　　　　　　　　//上傳成功後，頁面顯示圖片 var img = '<img class="preview" src="https://img.vancang.com/brand/" + result.ImgName + '?' + new Date() + '"/>';
                    $(".preview_box").empty().append(img);
                    alert("品牌Logo上傳成功");
                },
                error: function (xhr, status, p3, p4) {
                    console.log(p3+p4);
                }
            });
        } else {
            alert("請安裝IE10以上版本瀏覽器!");
        }
    });
</script>

　　4.上傳程序（部署在圖片服務器上），關鍵代碼

        [HttpPost]
        public JsonResult UpdateBrandLogo()
        {
            ResultInfo resultInfo = new ResultInfo();
            resultInfo.Result = true;
            try
            {
　　　　　　　　　 //獲取上傳文件 var fileContent = Request.Files["FileUpload"];
　　　　　　　　　 //上傳路徑 string uploadAbsPath = ImagesPhysicalPath + "\\Brand\\";
　　　　　　　　　 //上傳代碼，保存在磁盤等等，返回新的文件名
                resultInfo.ImgName= ...;
            }
            catch (Exception ex)
            {
                resultInfo.Result = false;
                resultInfo.Msg = ex.Message;
            }
            return Json(resultInfo);
        }

　　5.上傳程序（部署在圖片服務器上），跨域配置

 <httpProtocol>
      <customHeaders>
　　　　 //配置成後臺系統的域名
        <add name="Access-Control-Allow-Origin" value="https://erp.vancang.com" />
        <add name="Access-Control-Allow-Methods" value="OPTIONS,GET,POST" />
　　　　 //跨域請求時，帶上cookie和session
        <add name="Access-Control-Allow-Credentials" value="true" />
      </customHeaders>
 </httpProtocol>

　　6.圖片上傳後頁面效果

　　OK，跨域上傳圖片基本就完成了，有興趣的能夠本身敲敲代碼，作個小測試。

 

PS：客官有時間光臨個人小站 萬倉網。