file_upload_demo.html

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><scriptsrc="../static/dist/js/jquery-1.11.3.min.js"></script><scriptsrc="../static/js/ys_ui_plugin/simple_file_upload.js"></script></head><body><ahref="javascript:void(0)">上传文件</a><img/><script>$("a").simpleUploadFile({changeCallback:function(file){varfileReader=newFileReader();fileReader.onload=function(){$("img").attr("src",this.result);};fileReader.readAsDataURL(file);}});</script></body></html>

simple_file_upload.js

(function($){vardefaultSettings={acceptTypes:["jpg","png"],//接受的上传文件类型changeCallback:function(file){}//自定义input[type=file]change事件};varrenderHtml="<inputtype='file'style='display:none;'/>";//添加隐藏的functionrenderInputFile(target,settings){//生成dialog唯一标识varid="ys_simple_file_upload_"+newDate().getTime()+""+parseInt(Math.random());$(target).attr("ys_simple_file_upload",id);$(renderHtml).attr("id",id).appendTo("html");//添加到文档中去return$("#"+id);}functionbindEventHandlers(container,settings){varchangeCallback=settings.changeCallback;$(container).change(function(e){e.preventDefault();e.stopPropagation();varfile=e.target.files[0];if(!validateFileType(file,settings)){alert("文件类型不正确!");return;}changeCallback(file);});}//验证文件类型functionvalidateFileType(file,settings){varacceptTypes=settings.acceptTypes;varname=file.name;varfileSuffix=name.substr(name.lastIndexOf(".")+1);for(vari=0;i<acceptTypes.length;i++){varacceptType=acceptTypes[i];if(acceptType==fileSuffix){returntrue;}}returnfalse;}varoptions={simpleUploadFile:function(settings){varmergedSettings={};$.extend(mergedSettings,defaultSettings,settings);varcontainer=renderInputFile(this,mergedSettings);bindEventHandlers(container,mergedSettings);$(this).click(function(e){e.preventDefault();e.stopPropagation();$(container).click();});}};$.fn.extend(options);})(jQuery);