jQuery插件ajax图片上传插件

ajax无刷新上传

基于jQuery的插件

可以支持多图上传

url配置 和ajax删除（远程删除需要server端配合实现）

支持设置默认图片（可多图）

IE10+,chrome,firefox

截图：

<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-12 control-label">图片</label>
<div class="col-lg-10 col-md-10">

<div class="produtPic" id="J_pruductPic">
<!--
加载默认图片，只需要设置default-val 属性即可
<input name="goods_img" type="file" class="form-control J_uploadFile" default-val="a.jpg,b.jpg"/>
-->
<input name="goods_img" type="file" class="form-control J_uploadFile" />
</div>

</div>
</div>
<!-- End .control-group  -->

//调用例子
$("#J_pruductPic").dccUploadFiles({
width:80,
height:80,
max:5,//最多上传图片数量，默认上限20
uploadUrl:"<?php echo $this->basePath() ; ?>/Upload/uploadAjax",
delUrl:"<?php echo $this->basePath() ; ?>/Upload/deleteAjax",//不进行服务器端物理删除则可以不写
});

服务器端获取方法

上传成功后，自动会给dom中创建一个以file表单name+"_upload" 命名的隐藏域

<input name="goods_img_upload" type="hidden" class="ui-wizard-content" value="/upload/201602261.jpg,/upload/201602262.jpg,/upload/201602263.jpg">

所以后端就可以使用post接收了

//PHP
$files = $_POST['goods_img_upload'];

//JAVA
String filesStr = request.getParameter("goods_img_upload");

实现代码：

jQuery.fn.extend({
dccUploadFiles: function(uploadConf){
var _this=this;
var dccUpFunc = function(_uploadConf){
var newName=_this.find("input[type=file]").prop("name")+"_upload";
var newInput = document.createElement("input");
newInput.setAttribute("name",newName);
newInput.setAttribute("type","hidden");
_this.parents("form").append(newInput);
this.val=[];
var self = this;
//加载值
if(!_uploadConf){
throw "uploadConf is not found!";
}
var fileInput=_this.find("input[type=file]");

var _defConf={
width:_uploadConf.width||50,//px
height:_uploadConf.height||50,//px
max:_uploadConf.max||20,//最大上传数量
}
fileInput.css("cssText","width:"+_defConf.width+"px!important");
_this.css("cssText","width:"+_defConf.width+"px!important");

//设置表单为不可视模式
fileInput.css({
"height":_defConf.height+"px",
"opacity":0,
"position":"absolute",
"top":"0px",
"left":"0px",
"padding":"0px",
"margin":"0px"
});

//设置按钮样式
_this.css({
"height":_defConf.height+"px",
"background":"#fff",
"border":"dotted #999 1px",
"font-size":"25px",
"line-height":_defConf.height*0.9+"px",
"text-align":"center",
"color":"#999",
"position":"relative",
"display":"inline-block",
"float":"left",
});

_this.prepend("+");

fileInput.on("change",function(){
//max
if(_this.parent().find(".C_dcc_imgbox_show").length>=_defConf.max){
alert("最多上传"+_defConf.max+"张图片,您已经达到最大上限了!");
$(this).val("");
return;
}
uploadFile($(this));
$(this).val("");
});

var uploadFile=function(file){

//创建FormData对象
var data = new FormData();
$.each(file[0].files, function(i, file) {
data.append('upload_file', file);
});

addLoadingbox();
//发送数据
$.ajax({
url:_uploadConf.uploadUrl,
type:'POST',
data:data,
cache: false,
contentType: false,        //不可缺参数
processData: false,        //不可缺参数
success:function(data){
//data = $(data).html();
//console.log(data);
addPicShow(Base_Url+"/"+data.filepath);

//把返回的值填入
self.val.push(data.filepath);

$(newInput).val(self.val.join());
},
error:function(e){
alert('上传出错');
throw e;
setTimeout(
function(){
$("#J_dcc_loadingId").remove();
},200);

}
});
}
var addLoadingbox=function(){
var loadingbox = document.createElement("div");
$(loadingbox).prop("id","J_dcc_loadingId");
$(loadingbox).css({
"width":_defConf.width+"px",
"height":_defConf.height+"px",
"background":"#fff",
"border":"dotted #999 1px",
"font-size":"12px",
"line-height":_defConf.height*0.9+"px",
"text-align":"center",
"color":"#999",
"margin-right":"10px",
"display":"inline-block",
"float":"left",
"text-algin":"center",
});
$(loadingbox).text("上传中...");
_this.before(loadingbox);
}
var addPicShow=function(picurl){
$("#J_dcc_loadingId").remove();
var imgbox = document.createElement("div");
$(imgbox).addClass("C_dcc_imgbox_show");
$(imgbox).css({
"width":_defConf.width+"px",
"height":_defConf.height+"px",
"background":"#fff",
"border":"dotted #999 1px",
"font-size":"25px",
"line-height":_defConf.height*0.9+"px",
"text-align":"center",
"color":"#999",
"background-image":"url("+picurl+")",
"background-size":"cover",
"background-position":"center",
"margin-right":"10px",
"display":"inline-block",
"float":"left",
"position":"relative",
});
var delbox = document.createElement("a");
$(delbox).css({
"width":_defConf.width+"px",
"height":_defConf.height+"px",
"background":"#fff",
"border":"0px",
"font-size":"13px",
"line-height":_defConf.height*0.9+"px",
"text-align":"center",
"color":"#999",
"background":"rgba(0,0,0,.8)",
"margin-right":"10px",
"display":"block",
"float":"left",
"position":"absloute",
"color":"#dddddd",
"top":"0px",
"left":"0px",
"opacity":"0",
"text-decoration":"initial"
}).text(" X 删除").on("mouseover",function(){
$(this).css("opacity","1");
}).on("mouseout",function(){
$(this).css("opacity","0");
}).on("click",function(){
if(confirm("确定要删除吗？")){
$(imgbox).remove();
//把返回的值填入
for(var n=0;n<self.val.length;n++){
if(picurl==self.val
){
self.val.splice(n,1);
break;
}
}
$(newInput).val(self.val.join());
if(uploadConf.delUrl){ //如果有删除url 则进行后台删除
$.post(uploadConf.delUrl,{"picpath":picurl},function(data){
//删除成功

},'json');
}
}
});
$(imgbox).append(delbox);
_this.before(imgbox);
}
//初始化默认数据
var defaultVal = fileInput.attr("default-val");
if(defaultVal){
this.val = defaultVal.split(",");
for(index in this.val){
addPicShow(Base_Url+"/"+this.val[index]);
}
$(newInput).val(this.val.join());
}
}
var dccUpFunc = new dccUpFunc(uploadConf);
}
});