基于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 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
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 GUID生成函数和类
2014/03/10 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
javascript 内存回收机制理解
2011/01/17 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
canvas实现钟表效果
2017/02/13 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
python实现通过shelve修改对象实例
2014/09/26 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
经典导游欢迎词大全
2014/01/16 职场文书
职业女性的职业规划
2014/03/04 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL