vue.js 多图上传，并可预览

<!DOCTYPE html>
<html>
<head><title>vue.js 简单多图上传图片</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">ul { list-style: none outside none; margin:0; padding: 0; }li { margin: 0 10px; display: inline; }#app{overflow: hidden;text-align: center;margin-top: 10%;}img {width: 100px;height: 100px;margin: auto;display: inline;margin-bottom: 10px;}</style><script src="//cdn.bootcss.com/vue/1.0.23/vue.min.js"></script><script src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script><!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><!-- 可选的Bootstrap主题文件（一般不用引入） --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body><div id="app"><div style="margin-bottom: 20px"><h2>选择图片</h2><a id='addPic' href="" v-on:click="addPic">添加图片 </a><input type="file" @change="onFileChange" multiple style="display: none;"></div><div v-if="images.length >0"><ul><li v-for="(key,image) in images"><img :src="data:image" @click='delImage(key)' /><a href="#" style="position: absolute;" @click='delImage(key)'><span class="glyphicon glyphicon-remove"></span></a></li></ul><button @click="removeImage">移除全部图片</button><button @click='uploadImage' >上传</button></div></div><script type="text/javascript">Vue.config.debug = true;// 开启vue 调试功能new Vue({el: '#app',data: {images: []},methods: {addPic(e){e.preventDefault();$('input[type=file]').trigger('click');return false;},onFileChange(e) {var files = e.target.files || e.dataTransfer.files;if (!files.length)return; this.createImage(files);},createImage(file) {if(typeof FileReader==='undefined'){alert('您的浏览器不支持图片上传，请升级您的浏览器');return false;}var image = new Image();         var vm = this;var leng=file.length;for(var i=0;i<leng;i++){var reader = new FileReader();reader.readAsDataURL(file[i]); reader.onload =function(e){vm.images.push(e.target.result);                                    };                 }                        },delImage:function(index){this.images.shift(index);},removeImage: function(e) {this.images = [];},uploadImage: function() {console.log(this.images);return false;var obj = {};obj.images=this.images$.ajax({type: 'post',url: "upload.php",data: obj,dataType: "json",success: function(data) {if(data.status){alert(data.msg);return false;}else{alert(data.msg);return false;}}});}}})</script>
</body></html>

PHP 代码

<?phpdefine('UPLOAD_DIR', './images/');$img = $_POST['image'];$start=strpos($img,',');$img= substr($img,$start+1);$img = str_replace(' ', '+', $img);$data = base64_decode($img);$fileName = UPLOAD_DIR . uniqid() . '.jpg';$success = file_put_contents($fileName, $data);$data=array();if($success){$data['status']=1;$data['msg']='上传成功';echo json_encode($data);}else{$data['status']=0;$data['msg']='系统繁忙，请售后再试';echo json_encode($data);}

vue.js 多图上传，并可预览相关推荐

html上传头像及预览,js实现头像上传并且可预览提交
在用户注册账号或者修改资料的时候会需要用户在本地选择一张图片作为头像,并同时预览, 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是, ...
用openoffice+jodconverter+webuploader+pdf.js实现文件上传、在线预览功能
一.背景最近公司一个项目要实现一个文件上传以及多文档在线预览的功能,之前一直做无线工具开发的,没有涉及到这些东西.另外项目组缺java开发人员,而且自己也只是一个半吊子前端加小半吊子java开发人员 ...
vue上传zip文件到服务器,vue.js zip文件上传
vue.js zip文件上传内容精选换一换开发过程中,您有任何问题可以在github上提交issue,或者在华为云对象存储服务论坛中发帖求助.接口参考文档详细介绍了每个接口的参数和使用方法.在O ...
php图片批量上传插件下载,vue.js图片批量上传插件
vue.js图片批量上传插件是一款基于vue.js框架的图片上传控件,适用于手机端的图片上传代码,支持批量上传,拖到图片上传,显示文件数量和大小等功能 js代码 // import up from ' ...
js上传视频，预览视频
js上传视频,预览视频 <videostyle="width:300px; height:auto;object-fit: fill;"playsinlinecontrols ...
html上传头像及预览,JS实现上传头像并实时预览
说起各大网站的用户中心功能,其中就少不了用户头像上传这个小小的功能,如果我们依托框架来编写的的话,相信非常的容易,但如果我们自己来单纯的使用JS来实现头像上传,并在选择本地头像的时候,实现预览我想也是 ...
JavaScript 实现图片上传前本地预览
JavaScript 实现图片上传前本地预览图片上传前预览,应该算是一个普遍的需求,很多时候可能选中的图片并不是想要的那张,所以需要上传前预览下. JS(浏览器中)是一门特殊的语言,它没有直接读写磁 ...
vue3 el-upload 上传附件及预览限制只能上传一个图片或者pdf格式的文件
vue3 el-upload 上传附件及预览限制只能上传一个图片或者pdf格式的文件效果如图直接看代码吧 template部分 <div class="file-upload&q ...
2016/4/19 ①单个文件上传 ②上传图片后预览图片
1,f1.php <!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF ...

vue.js 多图上传，并可预览

vue.js 多图上传，并可预览相关推荐

最新文章

热门文章