【項目相關】MVC中使用WebUploader進行圖片預覽上傳以及編輯
項目中需要用到多圖片上傳功能，於是在百度搜了一下，首先使用了kissy uploader,是由阿里前端工程師們發起創建的一個開源 JS 框架中的一個上傳組件。。。但，后面問題出現了。
在對添加的信息進行重新編輯的時候，這些圖片怎么辦？由於對js不是很熟悉，就沒有想去修改這個組件的代碼。只有重新尋找合適的組件，於是就找到了百度的WebUploader,下面簡要描述一下該組件在MVC中的使用，包括圖片的上傳和預覽，以及在編輯界面對圖片的處理辦法。
先來一張效果圖：
（一）圖片的上傳和預覽
（1）下載WebUploader
（2）將下載的文件添加到你的項目中，一般這幾個就夠了
<script src="~/Script/jquery-1.8.2.min.js"></script> <!--引入Css--> <link href="~/CSS/webuploader.css" rel="stylesheet" /> <!--引入Js--> <script src="~/Script/webuploader.js"></script>
（3）在視圖上放一個放圖片的容器，以及一個選擇圖片文件的按鈕
<div id="fileList"> </div> <div class="cp_img_jia" id="filePicker"></div>
(4)然后就是用js來初始化WebUploader,這段代碼主要也是借鑒了網上的一個Demo,找不到出處了，在此表示感謝。
var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
var $ = jQuery,
$list = $('#fileList'),
ratio = window.devicePixelRatio || 1,
// 縮略圖大小
thumbnailWidth = 90 * ratio,
thumbnailHeight = 90 * ratio,
// Web Uploader實例
uploader;
$(function () {
uploader = WebUploader.create({
// 選完文件后，是否自動上傳。
auto: true,
disableGlobalDnd: true,
// swf文件路徑
swf: applicationPath + '/Script/Uploader.swf',
// 文件接收服務端。
server: applicationPath + '/EstSource/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="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 ()
{
});//顯示刪除按鈕
$(".cp_img").live("mouseover", function ()
{
$(this).children(".cp_img_jian").css('display', 'block');
});
//隱藏刪除按鈕
$(".cp_img").live("mouseout", 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));
$(this).parent().remove();
});
});
這段js代碼是用在上傳圖片界面，主要思路如下：
1）設置圖片為自動上傳：auto: true,
2）每次返回的json對象保存起來，代碼如下：
//保存從后台返回的圖片url
var PhotoUrlArray = new Array();
function PhotoUrl(id, filePath) {
this.id = id;
this.filePath = filePath;
}
......
// 文件上傳成功執行方法
uploader.on('uploadSuccess', function (file, response) {
$('#' + file.id).addClass('upload-state-done');
//將上傳的url保存到數組
PhotoUrlArray.push(new PhotoUrl(response.id, response.filePath));
});
3）這里需要注意的是，當用戶上傳圖片后，有可能會進行刪除圖片操作，所以需要在該事件里面，將json對象數組里面相對應的元素進行刪除操作：
//執行刪除方法
$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.remove(i);
}
}
$(this).parent().remove();
});
（5）視圖的代碼就差不多了，現在在Controller里新建一個Action用於保存圖片並返回圖片路徑，由於該組件是一個文件一個文件的上傳到服務端，所以，在用戶沒有點擊保存的情況下，上傳的圖片只能保存到臨時文件夾里面，當用戶保存全部信息的時候，將保存到臨時文件夾的文件移動到正式文件夾，並保存相對應的圖片url到數據庫。
public ActionResult UpLoadProcess(string id, string name, string type, string lastModifiedDate, int size, HttpPostedFileBase file)
{
//保存到臨時文件夾
string urlPath = "../Upload/temp";
string filePathName = string.Empty;
string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, "Upload/temp");
if (Request.Files.Count == 0)
{
return Json(new { jsonrpc = 2.0, error = new { code = 102, message = "保存失敗" }, id = "id" });
}
string ex = Path.GetExtension(file.FileName);
filePathName = Guid.NewGuid().ToString("N") + ex;
if (!System.IO.Directory.Exists(localPath))
{
System.IO.Directory.CreateDirectory(localPath);
}
file.SaveAs(Path.Combine(localPath, filePathName));
return Json(new
{
jsonrpc = "2.0",
id = id,
filePath = urlPath + "/" + filePathName//返回一個視圖界面可直接使用的url
});
}
（二）編輯視圖界面圖片的處理
（1）主要思路：在對信息進行編輯的時候，也需要使用該控件來上傳圖片，所以為了保持和上傳圖片預覽格式一致，需要在初始化的時候，將后台傳回的圖片顯示在圖片容器里面。
<div id="fileList">
@foreach (var item in @ViewBag.picList)
{
<div id=@item.picId class="cp_img">
<img src="@item.picUrl" />
<div class="cp_img_jian"></div>
</div>
}
</div>
除了這里初始化預覽圖片外，還需要在獲取圖片url的方法上進行改造，這里就是關鍵。在視圖里，有一個實體屬性PhotoUrl用來保存所有的url圖片。
function GetPhotoUrl() {
var photoUrls = "";
$("#fileList img").each(function (i) {
if ($(this).attr("src").indexOf('UpLoad/photos/') > 0) {
photoUrls = photoUrls + $(this).attr("src")+",";
}
});
for (var i = 0; i < PhotoUrlArray.length; i++) {
photoUrls = photoUrls + PhotoUrlArray[i].filePath;
}
$("#PicUrls").val(photoUrls);
}
這個方法在上傳視圖中也是用來保存圖片urls的，大同小異，稍微修改一下就行。
（2）后端上傳服務都是使用的一個Action,沒有不同的地方，主要的區別是在保存的時候對圖片url的處理上，每個系統都不一樣，這里就不敘述了。
總結：項目做了幾個了，可技術總沒有提升上去，得突破自己才行！從現在開始，記錄每一個在項目中值得記錄的東西。
補充一下！！！
最近有很多人加我，想要這個源碼，我在這里提供百度雲盤鏈接，需要的請自己下載！謝謝。。。
鏈接：http://pan.baidu.com/s/1jHXziZ0 密碼：q919