html js input fileupload,简单 js fileUpload控件

file_upload_demo.htmlhtml>

上传文件

    

$("a").simpleUploadFile({

changeCallback:function(file){

var fileReader = new FileReader();

fileReader.onload = function(){

$("img").attr("src",this.result);

};

fileReader.readAsDataURL(file);

}

});

simple_file_upload.js(function($){

var defaultSettings = {

acceptTypes:["jpg","png"], // 接受的上传文件类型

changeCallback:function(file){

} // 自定义input[type=file] change事件

};

var renderHtml = "";

// 添加隐藏的

function renderInputFile(target,settings){

// 生成dialog唯一标识

var id = "ys_simple_file_upload_"+new Date().getTime()+""+parseInt(Math.random());

$(target).attr("ys_simple_file_upload",id);

$(renderHtml).attr("id",id).appendTo("html"); // 添加到文档中去

return $("#"+id);

}

function bindEventHandlers(container,settings){

var changeCallback = settings.changeCallback;

$(container).change(function(e){

e.preventDefault();

e.stopPropagation();

var file = e.target.files[0];

if(!validateFileType(file,settings)){

alert("文件类型不正确!");

return;

}

changeCallback(file);

});

}

// 验证文件类型

function validateFileType(file,settings){

var acceptTypes = settings.acceptTypes;

var name = file.name;

var fileSuffix = name.substr(name.lastIndexOf(".")+1);

for(var i=0;i

var acceptType = acceptTypes[i];

if(acceptType==fileSuffix){

return true;

}

}

return false;

}

var options = {

simpleUploadFile:function(settings) {

var mergedSettings = {};

$.extend(mergedSettings,defaultSettings,settings);

var container = renderInputFile(this,mergedSettings);

bindEventHandlers(container,mergedSettings);

$(this).click(function(e){

e.preventDefault();

e.stopPropagation();

$(container).click();

});

}

};

$.fn.extend(options);

})(jQuery);