文件上傳控件，作到能夠任意刪除追加一張圖片（或者視頻）

思路：把全部的文件對象緩存到臨時數組裏，在提交的時候在從數組裏面取出來。

//選擇文件後處理
$("input[type='file']").change(function(event) {
var $textObj = $(this).parent().find("input[type='text']");
$textObj.val($(this).val());
});

/******************* 圖片上傳控制開始 ****************************************/
//選擇圖片文件處理
$("#btn_selImage").click(function(event) {
var fileObj = document.getElementById("fil_UploadImage");

// 清空文件
var form=document.createElement('form');
document.body.appendChild(form);
//記住file在舊錶單中的的位置
var pos=fileObj.nextSibling;
form.appendChild(fileObj);
form.reset();
pos.parentNode.insertBefore(fileObj,pos);
document.body.removeChild(form);

// 調用file控件
fileObj.click();
});

// 選擇圖片後上傳預覽圖片
$("#fil_UploadImage").change(function(event) {

// 上傳文件列表取得
var files = event.target.files;
var file;
// 上傳文件列表的文件全路徑取得
var arrFiles = $("#fil_UploadImage").val().split(",");
for (var k=0;k<files.length;k++){
var filepath = "file:///" + arrFiles[k];
// 第一個以後的路徑頭多一個空格，需去掉
if (k > 0) {
filepath = filepath.substring(1);
}
var filename = filepath.substring(filepath.lastIndexOf("\\")+1);
// 取得文件
file = files[k];

// 上傳圖片大小超過10*1020*1024的場合提示錯誤
if (file.size > 10*1020*1024) {
alert("上傳文件大小已超過最大容許上傳大小（10M）,請從新上傳。文件名：" + filename);
return;
}
// 文件已經存在的場合再次上傳提示脫誤
var fileDiv = $("#div_ImageList");
var $parentFileBox = fileDiv.find('.parentFileBox');
try {
$parentFileBox.children('.fileBoxUl').find('li').each(function(){
var fileNameOld = $(this).attr("id").replace("fileBox_","");
if (fileNameOld == filename.replace(".","")) {
throw "同名文件已經上傳,請不要重複上傳文件。文件名：" + filename;
return;
}
})
} catch(e) {
alert(e);
return;
}

// 添加到預覽區域
createBox("div_ImageList", file, filepath, false, false);

// 保存文件數據
ImageData[file.name.replace(".","")] = file;
}
})

// 選擇圖片後上傳圖片
$("#btn_UploadImage").click(function(event) {

// 按照縮略圖從數據文件中構造FormData而且提交上傳
var fileDiv = $("#div_ImageList");
var $parentFileBox = fileDiv.find('.parentFileBox');
var formData = new FormData();
$parentFileBox.children('.fileBoxUl').find('li').each(function(){
var fileName = $(this).attr("id").replace("fileBox_","");
formData.append(fileName , ImageData[fileName]);
})

// 進行異步文件上傳處理
$.ajax({
type: "POST",
url: "/case/taskcreate/doUploadImage",
data: formData ,
processData : false,
//必須false纔會自動加上正確的Content-Type
contentType : false ,
xhr: function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener("progress" , onprogress, false);
return xhr;
}
},
xhrFields: {
withCredentials: true
},
beforeSend: function(xhr) {
//請求前的處理
xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
var msg = "文件上傳中...,進度0%。";
ShowMessageDialog('process', msg);
},
success: function(req) {
//請求成功時處理
if($('#false').length > 0){
$('#g_all').remove();
$('#g_box').remove();
$('#g_css').remove();
}
if(req != ""){
$("")
// 圖片上傳組件初期化
var urlArray = eval("(" + JSON.stringify(req) + ")");
for ( var jsonUnit in urlArray) {
var tmpstr = "img[name='"+jsonUnit+"']";
$(tmpstr).eq(0).attr('src', urlArray[jsonUnit]);
}
}else{
var msg = "文件上傳失敗。";
ShowMessageDialog('error', msg);
}

},
error: function(req) {
//請求出錯處理
if($('#false').length > 0){
$('#g_all').remove();
$('#g_box').remove();
$('#g_css').remove();
}
var msg = "文件上傳失敗。";
ShowMessageDialog('error', msg);
}
});
})
/******************* 圖片上傳控制結束 ****************************************/

 

 

/*
* 生成文件預覽區域
*
* @param divId Div的ID
* @param file 文件
* @param filepath 文件全路徑
* @param disDownLoad 是否顯示下載按鈕
* @param disPlay 是否顯示播放按鈕
* @param mrl 播放時的文件路徑
*
* @return 無
*
*/
function createBox(divId, file, filepath, disDownLoad, disPlay, mrl) {


var fileInput = $('#'+divId);

var file_name = file.name.replace(".","");
var $parentFileBox = fileInput.find('.parentFileBox');
//添加父系容器;
if ( $parentFileBox.length <= 0 ) {
var div = '<div class="parentFileBox"> \ <ul class="fileBoxUl"></ul>\ </div>';
fileInput.append( div );
$parentFileBox = fileInput.find('.parentFileBox');
}

//添加子容器;
var li = '<li id="fileBox_'+file_name+'" class="diyUploadHover"> \ <div class="viewThumb"></div> \ ';
// 顯示download按鈕
if (disDownLoad) {
li += '<div class="diyDownLoad"></div> \ ';
}
// 顯示播放按鈕
if (disPlay) {
li += '<div class="diyPlayVideo"></div> \ ';
}
li += '<div class="diyCancel"></div> \ <div class="diyFileName">'+file.name+'</div> \ </li>';

// 追加縮略圖元素
$parentFileBox.children('.fileBoxUl').append(li);

// 取得圖片容器
var $fileBox = $('#fileBox_'+file_name);

//綁定取消事件;
$fileBox.children('.diyCancel').one('click',function(){
removeLi($(this).parent('li'),file_name);
});
// 綁定播放路徑,並打開播放窗口
$fileBox.children('.diyPlayVideo').one('click',function(){
$('#vlc')[0].playlist.add(filepath);
$('#vlc')[0].video.aspectRatio = "16:9";
openDialog("1", "div_play_window");
});
$("#div_play_window").children('.play_window_close').one('click',function(){
closeDialog('1');
});

// 縮略圖的顯示設置
if ( file.type.split("/")[0] == 'video' ) {
$fileBox.addClass("avi_diy_bg");
return;
} else if ( file.type.split("/")[0] == 'image' ){
// 獲取 window 的 URL 工具
var URL = window.URL || window.webkitURL;
var imgURL;
imgURL = URL.createObjectURL(file);
// 追加圖片
$fileBox.find('.viewThumb').append('<img src="'+imgURL+'" />');
}
}

/*
* 清空預覽區域
*
* @param $li Li標籤
* @param file_name 文件名
*
* @return 無
*
*/
function removeLi ( $li ,file_name) {

if ( $li.siblings('li').length <= 0 ) {
$li.parents('.parentFileBox').remove();
} else {
$li.remove();
}
}