爱分享666

当前位置:首页 >web前端>前端技术文档

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>vue.js 简单多图上传图片</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <style type="text/css">
  7.     
  8.     ul { list-style: none outside none; margin:0; padding: 0; }
  9.     li { margin: 0 10px; display: inline; }
  10.     #app{
  11.       overflow: hidden;
  12.       text-align: center;
  13.       margin-top: 10%;
  14.     }
  15.     img {
  16.         width: 100px;
  17.         height: 100px;
  18.         margin: auto;
  19.         display: inline;
  20.         margin-bottom: 10px;
  21.     }
  22.     </style>
  23.     <script src="//cdn.bootcss.com/vue/1.0.23/vue.min.js"></script>
  24.     <script src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
  25.     <!-- 新 Bootstrap 核心 CSS 文件 -->
  26.     <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  27.     <!-- 可选的Bootstrap主题文件(一般不用引入) -->
  28.     <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  29.     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  30.     <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  31. </head>
  32. <body>
  33.         <div id="app">
  34.             <div style="margin-bottom: 20px">
  35.                 <h2>选择图片</h2>
  36.                 <a id='addPic' href="" v-on:click="addPic">添加图片 </a>
  37.                 <input type="file" @change="onFileChange" multiple style="display: none;">
  38.             </div>
  39.             <div v-if="images.length >0">
  40.                <ul>
  41.                   <li v-for="(key,image) in images">
  42.                     
  43.                      <img :src="image" @click='delImage(key)' />
  44.                      <a href="#" style="position: absolute;" @click='delImage(key)'>
  45.                         <span class="glyphicon glyphicon-remove"></span>
  46.                     </a>
  47.                   </li>
  48.                </ul>
  49.                 <button @click="removeImage">移除全部图片</button>
  50.                 <button @click='uploadImage' >上传</button>
  51.             </div>
  52.         </div>
  53.     <script type="text/javascript">
  54.     Vue.config.debug = true;// 开启vue 调试功能
  55.     new Vue({
  56.         el: '#app',
  57.         data: {
  58.             images: []
  59.         },
  60.         methods: {
  61.             addPic(e){
  62.                 e.preventDefault();
  63.                 $('input[type=file]').trigger('click');
  64.                 return false;
  65.             },
  66.             onFileChange(e) {
  67.                 var files = e.target.files || e.dataTransfer.files;
  68.                 if (!files.length)return; 
  69.                 this.createImage(files);
  70.             },
  71.             createImage(file) {
  72.                 if(typeof FileReader==='undefined'){
  73.                     alert('您的浏览器不支持图片上传,请升级您的浏览器');
  74.                     return false;
  75.                 }
  76.                 var image = new Image();         
  77.                 var vm = this;
  78.                 var leng=file.length;
  79.                 for(var i=0;i<leng;i++){
  80.                     var reader = new FileReader();
  81.                     reader.readAsDataURL(file[i]); 
  82.                     reader.onload =function(e){
  83.                     vm.images.push(e.target.result);                                    
  84.                     };                 
  85.                 }                        
  86.             },
  87.             delImage:function(index){
  88.                 this.images.shift(index);
  89.             },
  90.             removeImage: function(e) {
  91.                 this.images = [];
  92.             },
  93.             uploadImage: function() {
  94.                 console.log(this.images);
  95.                 return false;
  96.                 var obj = {};
  97.                 obj.images=this.images
  98.                 $.ajax({
  99.                     type: 'post',
  100.                     url: "upload.php",
  101.                     data: obj,
  102.                     dataType: "json",
  103.                     success: function(data) {
  104.                         if(data.status){
  105.                             alert(data.msg);
  106.                             return false;
  107.                         }else{
  108.                             alert(data.msg);
  109.                             return false;
  110.                         }
  111.                     }
  112.                 });
  113.             }
  114.         }
  115.     })
  116.     </script>
  117. </body>
  118. </html>
PHP代码:
  1. <?php
  2.     define('UPLOAD_DIR', './images/');
  3.     $img = $_POST['image'];
  4.     $start=strpos($img,',');
  5.     $img= substr($img,$start+1);
  6.     $img = str_replace(' ', '+', $img);
  7.     $data = base64_decode($img);
  8.     $fileName = UPLOAD_DIR . uniqid() . '.jpg';
  9.     $success = file_put_contents($fileName, $data);
  10.     $data=array();
  11.     if($success){
  12.         $data['status']=1;
  13.         $data['msg']='上传成功';
  14.         echo json_encode($data);
  15.     }else{
  16.         $data['status']=0;
  17.         $data['msg']='系统繁忙,请售后再试';
  18.         echo json_encode($data);
  19.     }
上一篇:

经典必看maven视频教程_入门到精通百度云下载地址

下一篇:

javaweb 商城项目视频教程

0 +1
打赏 ×

如果网站能给予您帮助,欢迎给网站捐助,给我打赏个吧!
您的支持是我的动力,让网站能一直陪伴着大家,共同学习进步。
捐助费用将用于网站日常运营(服务器租费、域名租费等)
捐助者请发送邮箱提供姓名至 zhaoqn@163.com 留言以表感谢。

网友评论


  • 验证码:

热门评论

本月热门

推荐资料

精彩评论

回到顶部