html:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
......
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="attach/jquery.attach.js"></script>
<script type="text/javascript" src="attach/index.js"></script>
......
<script type="text/javascript">
$(function(){
initFileInput('fileuri','yulanimg');
});
</script>
</head>
<body>
<div>
<div class="uploadstyle">
<label for="doc-ta-1" style="padding-right: 10px;">上传图片</label>
<input id="inputupload" class="am-form-field am-input-sm" type="file" style="padding-top: 10px;padding-bottom: 10px;"/>
<span id="continuefile">
</span>
</div>
<div id="yulanimg"></div>
<span style="display:none;" id="fileuri"></span>
</div>
</body>
</html>
css
.uploadstyle {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent:;
line-height: 20px;
}
.uploadstyle input {
position: absolute;
font-size: 100px;
right:;
top:;
opacity:;
}
index.js
//初始化fileinput控件
function initFileInput(fileuri,yulanimg) {
$(":input[type='file']").attachsvr({
script: urlcore + "/file/upload/batch",
uploadkey:"files",
filetype:[".jpg",".png",".jpeg",".bmp"], onComplete:function(json){
var data = JSON.parse(json.data);
if (data.success == true) {
//$("#"+divUploadWrap).css("background-image","");
//$("#"+fileuri).text('');
//i表示在data中的索引位置，n表示包含的信息的对象
//$("#"+yulanimg).html('');
var filespanval = $("#"+fileuri).text();
$.each(data.data,function(i,n){
$("#"+yulanimg).append('<img id="fileimgid" style="width: 250px;height: 250px;padding-left: 5px;padding-bottom: 5px;" src="'+n+'">');
if (filespanval != undefined && filespanval != null && filespanval != '') {
$("#"+fileuri).text(filespanval+"|||"+n);
}else{
$("#"+fileuri).text(n);
}
});
}else{
alert("上传失败");
} },
onProgress:function(xhr){
//console.log(xhr);
//console.log("progress,在这里可以添加loading 效果",parseInt(xhr.loaded/xhr.total*100)+"%")
$('#continuefile').text(parseInt(xhr.loaded/xhr.total*100)+"%");
},
onCheck:function(file){
console.log(file);
return true;
},
onError:function(e){console.log("error",e)},
ctxdata:{
"参数1":"参数1的值",
"参数2":"参数2",
} });
}
jquery.attach.js
/*
*@author 271151388@qq.com
*个人主页 http://www.imwinlion.com/
*专门为技术人员创业提供从工具到思维层面的支持的网站
*基本使用 https://my.oschina.net/u/2558718/blog/743780
*/
!~(function(w,d,$){
var _attachsvr={};
var defaultoptions={
debug:false,
onCheck:function(file){return true;},
onComplete:function(json){},
onError:function(r){},
onProgress:function(xhr){},
ctxdata:{},
script:"",
uploadkey:"files",
filetype:[".jpg",".png",".jpeg",".zip",".mp3",".mp4"]
}
_attachsvr.doupload=function(file,optios){
var options = $.extend(defaultoptions,optios);
var data = new FormData();
for(var i in options.ctxdata){
data.append(i,options.ctxdata[i]);
}
data.append(options["uploadkey"], file[0].files[0]);
var surport = false;
var filename = file[0].files[0].name;
for(var i in options.filetype){ if(filename.indexOf(options.filetype[i])>-1){
surport = true;
}
}
if(surport==false){
options.onError({"result":"notsurport","msg":"这个文件类型不支持","data":{}})
return false;
}
if(!options.onCheck(file)){
return false;
}
$.ajax({
url: options.script,
type: 'POST',
data: data,
xhr: function() {
var xhr = $.ajaxSettings.xhr();
xhr.upload.addEventListener('progress', function(xhr){
options.onProgress(xhr);
}, false);
return xhr;//一定要返回，不然jQ没有XHR对象用了
},
processData: false,
contentType: false,
error:function(XMLHttpRequest, textStatus, errorThrown){
options.onError(
{
"result":"errornet",
"msg":"网络通讯错误",
"data":{"XMLHttpRequest":XMLHttpRequest,"textStatus":textStatus,"errorThrown":errorThrown}
}
);
}
}).done(function(ret){
options.onComplete({"result":"success","msg":"文件已经上传成功","data":ret});
});
};
w.attachsvr = _attachsvr;
$.fn.extend({
//插件名称 - paddingList
attachsvr: function (options) {
var defaults = defaultoptions;
var options = $.extend(defaults, options);
return this.each(function () {
var o = options;
var obj = $(this);
$(this).unbind().change(function(){
_attachsvr.doupload(obj,o);});
}); }
});
})(window,document,jQuery)
注： 如果上传之后的预览图需要调整大小和只允许上传一张图片，可以如下设置：
initFileInput('fileuri','yulanimg');
var wait = setInterval(function(){
var fileimgid = $("#fileimgid")[0];
//判断select option是否为空
if (fileimgid != 0 && fileimgid != null && fileimgid != undefined && fileimgid != '') {
clearInterval(wait);
//自定义图片上传预览的大小
$("#fileimgid").css("width","30px");
$("#fileimgid").css("height","30px");
$("#fileimgid").css("padding-left","");
$("#fileimgid").css("padding-bottom","");
$(".uploadstyle").css("background","#e2e2e2");
}
},100);
var wait1 = setInterval(function(){
var fileimgid = $("#yulanimg").html();
//判断select option是否为空
if (fileimgid != 0 && fileimgid != null && fileimgid != undefined && fileimgid != '') {
clearInterval(wait1);
$("#inputupload").attr("disabled",true);
}
},100);