首页>经典在线

PHP,Vue.js ,ajax, 多图上传图功能和技巧

2018-10-05 08:28:00 | 查看次数 204 | 分类: 经典在线 文章来源:来源:http://www.ifx666.cn

摘要内容:PHP,Vue.js ,ajax, 多图上传图功能和技巧


  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.     }

上一篇: java视频教程 -JUnit部分讲解

下一篇: 锋利的jQuery读者可以系统地掌握jQuery的选择器、DOM操作等操作细节

验证码:
评论列表
  • 文章推荐

    09-19 | 查看次数 786

    《深入理解Spring Cloud与微服务构建》PDF下载

    09-14 | 查看次数 197

    bootstrap tooltip 提示框的样式、提示字体颜...

    09-01 | 查看次数 200

    json字符串与java对象互转,json字符串转化为map...

    08-04 | 查看次数 383

    java面试题及答案---2018核心Java面试问题与解答...

    08-03 | 查看次数 900

    java面试题及答案---2018核心Java面试问题与解答...

    最新评论
    文章标题:管理和发布文章java cms

    评论内容:能下载吗

    评论时间:2018-12-12 01:30:02

  • 返回顶部
    欢迎投稿
    返回底部