webuploader結合c# mvc實現圖片上傳，刪除，編輯回顯

前面寫了個初級版的，如今總結下完整的。這裏主要總結下webuploader結合c# mvc圖片上傳，編輯回顯及刪除。

1、上傳

一、下載WebUploader，這裏主要用到如下幾個文件：Uploader.swf，webuploader.css，webuploader.js

二、在頁面引入css和js

三、頁面加一個用於放圖片的div容器，一個添加圖片的按鈕和一個上傳圖片的按鈕（由於我使用手動上傳的方式，不是有文件選擇就開始上傳），以下：

<div id="fileList" style="margin-left: 20px">
  </div>
 <div id="filePicker" style="margin-left: 20px">添加</div>
 <button id="ctlBtn" class="btn btn-default" style="margin-left: 10px">上傳</button>

四、初始化webuploader組件

（1）先定義一些用到的變量

var $ = jQuery,
        $list = $('#fileList'),

        // 優化retina, 在retina下這個值是2
        ratio = window.devicePixelRatio || 1,

        // 縮略圖大小
        thumbnailWidth = 350 * ratio,
        thumbnailHeight = 350 * ratio,

         // Web Uploader實例
         uploader;

        //保存從後臺返回的圖片url
         PhotoUrlArray = new Array();

（2）初始化webuploader組件

var uploader = WebUploader.create({

            // 選完文件後，是否自動上傳。
             auto: false,

           //驗證文件總數量, 超出則不容許加入隊列
            fileNumLimit: 2,

           // swf文件路徑
            swf: '~/Content/Uploader.swf',

           // 文件接收服務端。
           server: '/Product/UpLoadProcess',

           // 選擇文件的按鈕。可選。
           // 內部根據當前運行是建立，多是input元素，也多是flash.
           pick: '#filePicker',

           // 只容許選擇圖片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
            });

五、設置當文件被加入隊列之後觸發的事件

uploader.on('fileQueued', function (file) {
            var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail cp_img">' +
                        '<img>' +
                    '<div class="cp_img_jian"></div></div>'
                    ),
                $img = $li.find('img');


            // $list爲容器jQuery實例
            $list.append($li);

            // 建立縮略圖
            // 若是爲非圖片文件，能夠不用調用此方法。
            // thumbnailWidth x thumbnailHeight 爲 100 x 100
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能預覽</span>');
                    return;
                }

                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
        });

六、 上傳過程當中觸發，攜帶上傳進度

uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress span');

            // 避免重複建立
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>')
                        .appendTo($li)
                        .find('span');
            }

            $percent.css('width', percentage * 100 + '%');
        });

七、當文件上傳成功時觸發，給item添加成功class, 用樣式標記上傳成功。

uploader.on('uploadSuccess', function (file, response) {

            $('#' + file.id).addClass('upload-state-done');
            //將上傳的url保存到數組
            PhotoUrlArray.push(new PhotoUrl(response.id, response.filePath));
        });

八、 當文件上傳出錯時觸發，顯示上傳出錯。

uploader.on('uploadError', function (file) {
            var $li = $('#' + file.id),
                $error = $li.find('div.error');

            // 避免重複建立
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }

            $error.text('上傳失敗');
        });

九、無論成功或者失敗，文件上傳完成時觸發，先刪除進度條。

uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').remove();
        });

十、當全部文件上傳結束時觸發

uploader.on("uploadFinished", function () {
        });

十一、 開始上傳

$("#ctlBtn").click(function () {
            uploader.upload();
        });

2、刪除

一、顯示刪除按鈕

$(document).on("mouseover",".cp_img", function (){
            $(this).children(".cp_img_jian").css('display', 'block');
        });

二、隱藏刪除按鈕

$(document).on("mouseout",".cp_img", function () {
            $(this).children(".cp_img_jian").css('display', 'none');
        });

三、執行刪除方法

$list.on("click", ".cp_img_jian", function () {
            var Id = $(this).parent().attr("id");
            //刪除該圖片
            uploader.removeFile(uploader.getFile(Id, true));
            for (var i = 0; i < PhotoUrlArray.length; i++) {
                if (PhotoUrlArray[i].id === Id) {
                    PhotoUrlArray.splice(i, 1);
                }
            }
            $(this).parent().remove();
        });

3、圖片編輯回顯

一、編輯時根據已有url模仿異步上傳圖片

var getFileBlob = function (url, cb) {
                var xhr = new XMLHttpRequest();
                xhr.open("GET", url);
                xhr.responseType = "blob";
                xhr.addEventListener('load', function() {
                    cb(xhr.response);
                });
                xhr.send();
            };

            var getFileObject = function(filePathOrUrl, cb) {
                getFileBlob(filePathOrUrl,cb);
            };

二、顯示已有地址的圖片

//須要編輯的圖片列表
          var picList = ['圖片url','圖片url','圖片url','圖片url' ]
            $.each(picList, function (index, item) {
                if(item!=="")
                getFileObject(item,
                    function(fileObject) {
                        var wuFile = new WebUploader.Lib.File(WebUploader.guid('rt_'), fileObject);
                        var file = new WebUploader.File(wuFile);
                        uploader.addFiles(file);
                 });
            });

4、C#後臺上傳圖片，使用相對路徑

public ActionResult UpLoadProcess(string id, string name, string type, string lastModifiedDate, int size, HttpPostedFileBase file)
        {
            string filePath = "~/Image/Upload/";
            if (Request.Files.Count == 0)
            {
                return Json(new { jsonrpc = 2.0, error = new { code = 102, message = "保存失敗" }, id = id });
            }
            var mapFilePath = Server.MapPath(filePath);
            if (!Directory.Exists(mapFilePath))
            {
                Directory.CreateDirectory(mapFilePath);
            }
            string ex = Path.GetExtension(file.FileName);
            var filePathName = Guid.NewGuid().ToString("N") + ex;
            string savePath = Server.MapPath(filePath+ filePathName);
            file.SaveAs(savePath);
            return Json(new { jsonrpc = "2.0", id = id, filePath = filePath + filePathName });

        }

參考地址： https://segmentfault.com/q/1010000007428390

http://fex.baidu.com/webuploader/getting-started.html

http://download.csdn.net/download/terryda/9475429#

http://www.cnblogs.com/cemaster/p/5604253.html