浏览器识别本地上传图片(转)

最新推荐文章于 2022-08-27 09:30:59 发布

weixin_33725722

最新推荐文章于 2022-08-27 09:30:59 发布

阅读量120

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xingmeng/p/4028873.html

本文介绍了一种使用JavaScript实现的文件上传与图片预览的方法，包括通过点击按钮触发文件选择框，利用File API读取选中文件并进行格式验证，最终在页面上实时显示所选图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

js:

function opload_file(obj){
　　$(obj).next('input[type="file"]').click();
　　$("#image_error").html('');
}

$('#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);
　　　　　　　　}
　　　　　　}
　　　　}
　　}
});

残念的是IE不支持…

转载于:https://www.cnblogs.com/xingmeng/p/4028873.html