文件上传控件，做到可以任意删除追加一张图片（或者视频）

Posted 2020-08-23 大连小肥云

思路：把所有的文件对象缓存到临时数组里，在提交的时候在从数组里面取出来。

//选择文件后处理
$("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();
}
}