input type='file'上传图片限制大小，类型判断，以及原生js实现上传至后端前实现图片显示

时间：2022-08-28 12:02:05

转自:https://blog.csdn.net/zjbkzj/article/details/70142844


<!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>


 


 


 


 


 


标签：
相关文章