浏览器识别本地上传图片
html:
<span class="shop_pic shop_pro" onClick="opload_file(this);" type="addButton">
添加图片<strong></strong>
</span>
<input class="change_img" type="file" name="image[]" style="display:none">
js:
function opload_file(obj){
$(obj).next(‘input[type="file"]‘).click();
$("#image_error").html(‘‘);
}
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
$(‘#pic_list input[type="file"]‘).live(‘change‘,function(){
var objUrl = getObjectURL(this.files[0]);
var type = this.files[0][‘type‘].split("/");
if(type[1] != "jpeg" && type[1] != "png" && type[1] != "gif"){
$("#image_error").html("图片格式不正确");
}else{
var size = this.files[0][‘size‘];
/* if(size > 10485760){
//限制10M的图片
$("#image_error").html("图片必须小于10M");
}*/
if (objUrl) {
$("#image_dom").children("span[type=‘addButton‘]").html(‘‘);
var image = ‘<img src="‘+objUrl+‘" width="191" height="126" />‘;
$("#image_dom").children("span[type=‘addButton‘]").append(image);
var strong_html = "<strong class=‘bg2‘ onclick=‘delImage(this);‘></strong>";
$("#image_dom").children("span[type=‘addButton‘]").append(strong_html);
$("#image_dom").children("span[type=‘addButton‘]").attr(‘type‘,‘addPic‘);
var num = $("#image_dom").children("span:[type=‘addPic‘]").length;
if(num < 4){
if(size > 10485760){
//限制10M的图片
$("#image_error").html("图片必须小于10M");
}else{
var addButton = ‘<span class="shop_pic shop_pro" onclick="opload_file(this);" type="addButton">‘;
addButton += ‘添加产品<strong></strong>‘;
addButton += ‘</span>‘;
addButton += ‘<input class="change_img" type="file" name="image[]" style="display:none">‘;
$(this).parent("#image_dom").append(addButton);
}
}
}
}
});
<input type="file" name="pictures[]" multiple="multiple" />
残念的是IE不支持…
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。