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: 0; line-height: 20px; } .uploadstyle input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; }
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=" 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);