基于vue+ bootstrap实现图片上传图片展示功能


Posted in Javascript onMay 17, 2017

效果图如下所示:

基于vue+ bootstrap实现图片上传图片展示功能

html

.....
.......
<-- key=idPicUrl -->
 <div class="col-sm-7" > 
    <img :src="queryFirmInfo[key]" alt="" style="max-height:200px;max-width:250px" class="myimage" :name="key" />
</div>
 <form id="fileForm" enctype="multipart/form-data" class="form-horizontal " >
  <div class="col-sm-5 " style="margin:0 25%;padding: 0">
     <input class="form-control" type="file" name="file" @change="handleFileChange" ref="inputer" >
    </div>
</form>

vue

data: {
   queryFirmInfo:{
   idPicUrl:""
   ......
  }
 }
//选择改变图片
     handleFileChange(e){
       var vm=this;
       let file = e.target.files[0];
       let supportedTypes = ['image/jpg', 'image/jpeg', 'image/png'];
       if (file && supportedTypes.indexOf(file.type) >= 0) {
         baseFileAjax(new FormData($( "#fileForm" )[0]),function(result){
           if(result.ret==0){
           //提交成功后
           //将图片上传到后台,得到后台图片的路径。
             vm.queryFirmInfo["idPicUrl"]=result.url;
             $("#dForm").formValidation('revalidateField', "idPicUrl");
           }else{
             layer.msg("修改图片失败!")
           }
         })
       } else {
         layer.alert('文件格式只支持:jpg、jpeg 和 png');
       }
     },
/**
 * @method :form表单提交文件
 * @param url :请求路径
 * @param data :请求数据(new FormData($( "#imgForm" )[0]))
 * @param method:回调方法
 */
function baseFileAjax(data,method){
  $.ajax({
    url: '/dspark-firm/firmMember/uploadFile.yt' ,
    type: 'POST',
    data: data,
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    success: method,
    error: function (returndata) {
      alert("Connection error");
    }
  });
}

以上所述是小编给大家介绍的基于vue+ bootstrap实现图片上传图片展示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
简单的代码实现jquery定时器
Nov 17 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
在Vue中使用HOC模式的实现
Aug 23 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
JavaScript运动框架 多物体任意值运动(三)
May 17 #Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 #Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 #Javascript
vue之nextTick全面解析
May 17 #Javascript
Vue.js学习教程之列表渲染详解
May 17 #Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 #Javascript
深入理解Commonjs规范及Node模块实现
May 17 #Javascript
You might like
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
json 实例详细说明教程
2009/10/31 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
python日志模块logbook使用方法
2019/09/19 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
2014世界杯球队球队口号
2014/06/05 职场文书
中学生运动会口号
2014/06/07 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
工作态度不好检讨书
2015/05/06 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS