nopcommerce的fineuploader上傳組件

　　nopcommerce一個優秀的國外開源商城。如今主要介紹Nop裏的文件上傳技術。

圖片上傳用的是fineuploader組件。fineuploader支持自定義上傳模板，代碼以下：

<div class="row">
    <div class="col-md-12">
        <div id="@clientId" class="upload-image-button pull-left margin-t-5">
            <noscript>
                <p>Please enable JavaScript to use file uploader.</p>
            </noscript>
        </div>
        <div class="remove-image-button pull-left margin-t-5">
            @if (picture != null)
            {
                <span id="@(clientId + "remove")" class="btn bg-red">刪除圖片</span>
            }
            else
            {
                <span id="@(clientId + "remove")" class="btn bg-red" style="display: none;">刪除圖片</span>
            }
        </div>
    </div>
</div>

 

 1 <script type="text/template" id="@(clientId)-qq-template">
 2     <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
 3         <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
 4             <span>將文件上傳</span>
 5         </div>
 6         <div class="qq-upload-button-selector qq-upload-button">
 7             <div>上傳一個文件</div>
 8         </div>
 9         <span class="qq-drop-processing-selector qq-drop-processing">
10             <span>正在上傳文件...</span>
11             <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
12         </span>
13         <ul class="qq-upload-list-selector qq-upload-list">
14             <li>
15                 <div class="qq-progress-bar-container-selector">
16                     <div class="qq-progress-bar-selector qq-progress-bar"></div>
17                 </div>
18                 <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
19                 <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
20                 <span class="qq-upload-file-selector qq-upload-file"></span>
21                 <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
22                 <span class="qq-upload-size-selector qq-upload-size"></span>
23                 <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">取消</a>
24                 <a class="qq-upload-retry-selector qq-upload-retry" href="#">從新上傳</a>
25                 <a class="qq-upload-delete-selector qq-upload-delete" href="#">刪除</a>
26                 <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
27             </li>
28         </ul>
29     </div>
30 </script>

<script type="text/javascript">
    $(document).ready(function () {
         $("#@(clientId)").fineUploader({
            request: {
                endpoint: '@(Url.Content("~/Admin/Picture/AsyncUpload"))'
            },
            template: "@(clientId)-qq-template",
            multiple: false
        }).on("complete", function(event, id, name, responseJSON, xhr) {
            if (responseJSON.success) {
                $("#@(clientId + "image")").html("<img src='" + responseJSON.imageUrl + "'/>");
                $("#@(clientId + "value") input").val(responseJSON.pictureId);
                $("#@(clientId + "remove")").show();
            }
        });
        $("#@(clientId + "remove")").click(function (e) {
            $("#@(clientId + "image")").html("<img src='@pictureService.GetDefaultPictureUrl(pictureSize)'/>");
            $("#@(clientId + "value") input").val(0);
            $(this).hide();
        });
    });
</script>

 後臺圖片處理代碼以下：

 public ActionResult AsyncUpload()
        {
            Stream stream = null;
            var fileName = "";
            var contentType = "";
            if (String.IsNullOrEmpty(Request["qqfile"]))
            {
                HttpPostedFileBase httpPostedFile = Request.Files[0];
                if (httpPostedFile == null)
                    throw new ArgumentException("No file uploaded");
                stream = httpPostedFile.InputStream;
                fileName = Path.GetFileName(httpPostedFile.FileName);
                contentType = httpPostedFile.ContentType;
            }
            else
            {
                stream = Request.InputStream;
                fileName = Request["qqfile"];
            }
            var fileBinary = new byte[stream.Length];
            stream.Read(fileBinary, 0, fileBinary.Length);
            var fileExtension = Path.GetExtension(fileName);
            if (!String.IsNullOrEmpty(fileExtension))
                fileExtension = fileExtension.ToLowerInvariant();
            if (String.IsNullOrEmpty(contentType))
            {
                switch (fileExtension)
                {
                    case ".bmp":
                        contentType = MimeTypes.ImageBmp;
                        break;
                    case ".gif":
                        contentType = MimeTypes.ImageGif;
                        break;
                    case ".jpeg":
                    case ".jpg":
                    case ".jpe":
                    case ".jfif":
                    case ".pjpeg":
                    case ".pjp":
                        contentType = MimeTypes.ImageJpeg;
                        break;
                    case ".png":
                        contentType = MimeTypes.ImagePng;
                        break;
                    case ".tiff":
                    case ".tif":
                        contentType = MimeTypes.ImageTiff;
                        break;
                    default:
                        break;  
                }
            }
            var picture = _pictureService.InsertPicture(fileBinary, contentType, null);
            return Json(new
            {
                success = true,
                pictureId = picture.Id,
                imageUrl = _pictureService.GetPictureUrl(picture, 100)
            },
               MimeTypes.TextPlain);
        }

注意「qqfile」是特定字段，不能改變