<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="上传至后端路径" method="post" id="up_img">
<div id="imglist">
</div>
<div id="upBtn">
<input type='file' name='photos' class="upfile">
</div>
<input type="submit" value="submit"/>
</form>
</body>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
function createfile(){
$('#upBtn').append("<input type='file' name='photos' class='upfile'>");
}
function showimg(url){
var img='<img src="'+url+'"/>';
$('#imglist').append(img);
}
function addfile(){
var file = this.files[0];//上传的图片的所有信息
console.log(this.files[0]);
//首先判断是否是图片
if(!/image\/\w+/.test(file.type)){
alert('上传的不是图片');
return false;
}
//在此限制图片的大小
var imgSize = file.size;
console.log(imgSize);
//35160 计算机存储数据最为常用的单位是字节(B)
//在此处我们限制图片大小为2M
if(imgSize>2*1024*1024){
alert('上传的图片的大于2M,请重新选择');
$(this).val('')
return false;
}
//如果还想限制图片格式也可以通过input的accept属相限制，或者file.name属性值做判断
//建议使用accept属性，简单，方便。具体可以查看我的另一片文章
//将图片信息通过如下方法获得一个http格式的url路径
var objUrl = getObjectURL(this.files[0]);
console.log(objUrl+'url');
//blob:http://127.0.0.1:8020/6bf47c99-496b-4cc4-ae73-27aa06987036url
showimg(objUrl)
//showimg($(this).val());
//$(this).val()本地上传的图片的绝对路径无法实现Img现实的，要将其转换为http格式的路径方能实现显示
$(this).hide();
createfile();
$('.upfile').bind('change',addfile);
}
$('.upfile').bind('change',addfile);
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { //
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
//仅简单的验证仅如下的浏览器支持 webkit or chrome ie11 ie10 firefox oprea
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
};
/*var objUrl = getObjectURL(this.files[0]) ;
if (objUrl) {
imgSrc.attr("src", objUrl);//给予jquery也可以如此使用
}*/
// URL对象是硬盘（SD卡等）指向文件的一个路径，如果我们做文件上传的时候，想要在图片没有上传服务器端的情况下
// 看到上传图片的效果图的时候就可是以通过var url=window.URL.createObjectURL(obj.files[0]);
// 获得一个http格式的url路径，此时候就可以设置到<img src="+url+">中显示了。window.webkitURL和window.URL是一样的，
// window.URL标准定义，window.webkitURL是webkit内核的实现（一般手机上就是使用这个）。
});
</script>
</html>
做项目时遇到了图片上传的问题，就专门学习了下，经查阅，总结得到如上实例，如上的结果都已经验证。
由于时间原因就简单粘贴图片了，错误之处请批评指正。谢谢