upload 上传图片(简易)
前端笔记 2017-11-09 19:38:03

 

XML/HTML Code复制内容到剪贴板
  1. <div class="necessary_list">  
  2.     <div class="necessary_header clear">  
  3.         <div class="fl">封面</div>  
  4.         <div class="fr btn_group">  
  5.             <button class="uploadBtn">  
  6.                 选择  
  7.                 <input type="file" class="uploadImageInput" @change="uploadImage($event)">  
  8.             </button>  
  9.   
  10.             <button>拍照</button>  
  11.         </div>  
  12.     </div>  
  13.     <div class="necessary_text">  
  14.         <input type="file" id="imageUpload" accept="image/*" style="display: none;">  
  15.         <img :src="coverImage" alt="上传图测试" id="coverImg">  
  16.     </div>  
  17. </div>  

 

上传表单绑定uploadImage的change事件，传this当前对象，在coverImage中指定默认图片，上传成功后更改默认图片的url，

JavaScript Code复制内容到剪贴板
  1.             uploadImage(event) {  
  2.                 var files = event.target.files || event.dataTransfer.files;  
  3.                 if(!files.length) return;  
  4. //              console.log(files);  
  5. //              return false;  
  6.   
  7.                 this.createImage(files);  
  8.             },  
  9.             createImage(file) {  
  10.                 if(typeof FileReader === "undefined") {  
  11.                     alert("您的浏览器不支持图片上传，请升级您的浏览器");  
  12.                     return false;  
  13.                 }  
  14.                 let image = new Image();  
  15.                 let leng = file.length;  
  16.                 let reader = new FileReader();  
  17.                 let userId = localStorage.getItem("userId") ? userId = localStorage.getItem("userId") : 1;  
  18.                 let publishId = this.$route.params.id;  
  19.                 let that = this;  
  20.                   
  21.                 reader.readAsDataURL(file[0]);  
  22.                 reader.onload = function(e) {  
  23.                     let params = {};  
  24.                     params.images = e.target.result;  
  25.                     params.userId = userId;  
  26.                     params.publish_id = publishId;  
  27.                       
  28.                     that.request.post(that.$store.state.cms.api.uploadCoverImage, params).then(response => {  
  29.                           
  30.                         let res = response.data;  
  31.                         if(res.code == 0) {  
  32.                             // 更改封面图片路径  
  33.                             that.coverImage = res.data;  
  34.                         } else {  
  35.                             Toast(res.msg);  
  36.                         }  
  37.   
  38.                     }, response => {  
  39.                         console.log(response);  
  40.                         // error callback  
  41.                     })  
  42.   
  43.                 };  
  44.             },  

 

type=file的上传表单的onchange事件，在执行过一次之后，再次点击，不再触发的解决办法，重新克隆一个对象并替换上去：

JQ的写法：

XML/HTML Code复制内容到剪贴板
  1. <script>  
  2. $(function(){  
  3.   form.reset(); //清除浏览器记录的上次记录  
  4.   var file;  
  5.   $(form).on("change","#file",function(e){  
  6.     //输出选中结果  
  7.     console.log(this.value);  
  8.     //每次选中都保存旧元素，并使用新的控件替换  
  9.     $(this).clone().replaceAll(file=this);  
  10.   }).submit(function(){  
  11.     //提交时把之前保存的旧元素替换回去  
  12.     $("#file").replaceWith(file);  
  13.   });  
  14. });  
  15. </script>  
  16. <form id="form">  
  17.   <input type="file" name="file" id="file"><br/>  
  18.   <input type="submit" />  
  19. </form>  

 

 

 

 

本文来自于：http://www.yoyo88.cn/note/frontend/197.html

上一篇 js转换Date日期格式 / 时间转换
下一篇 Javascript数组操作
相关的文章
Powered by yoyo苏ICP备15045725号