vue+weui+FormData+XMLHttpRequest 实现图片上传功能
首先是样式:https://weui.io/#uploader
在weui示例中可以看到是用以下方法进行选择图片
<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple/>
$uploaderInput = $("#uploaderInput");
$uploaderInput.on("change", function(e){
var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
for (var i = 0, len = files.length; i < len; ++i) {
var file = files[i]; if (url) {
src = url.createObjectURL(file);
} else {
src = e.target.result;
} $uploaderFiles.append($(tmpl.replace('#url#', src)));
}
});
由于俺们用的vue,所以改造一下子
<input @change="uploadInpuChange($event)" class="weui-uploader__input" type="file" accept="image/*" multiple=""/>
在相关vue实例中加入如下方法
uploadInpuChange: function (e) {
let src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files, self = this;
for (var i = 0, len = files.length; i < len; ++i) {
var file = files[i];
if (url) {
src = url.createObjectURL(file);
} else {
src = e.target.result;
}
self.imgs.push({ url: "background-image: url(" + src + ")"});//这个src为一种。。啥类型来着,自个F12瞅瞅
//添加到数组
filesAry.push({
file: file
})
};
}
最后是展示
<li v-for="img in imgs" class="weui-uploader__file a-fadein" v-bind:style="img.url"></li>
然后捏,就可以在此基础上做任何扩展操作啦,例如限制图片类型,数量鸭
最后是提交图片,先全添加进formdata中
let formdata = new FormData();
filesAry.forEach(function (obj) {
if (obj.file != null) {
formdata.append('files', obj.file);//原项目一般回附带其他参数类型然后遍历做相关判断再添加
}
})
然后使用XMLHttpRequest对象进行提交
let xhr = new XMLHttpRequest();
xhr.open('POST', location.href, true);
xhr.send(formdata);
xhr.onload = function (event) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
console.log(xhr.responseText);
//okay
}
else {
//no okay
}
};
我采取的是一次性全部提交,也可以依照这个改造为一个个提交
vue+weui+FormData+XMLHttpRequest 实现图片上传功能的更多相关文章
- 使用FormData数据做图片上传: new FormData() canvas实现图片压缩
使用FormData数据做图片上传: new FormData() canvas实现图片压缩 ps: 千万要使用append不要用set 苹果ios有兼容问题导致数据获取不到,需要后台 ...
- H5 利用vue实现图片上传功能。
H5的上传图片如何实现呢? 以下是我用vue实现的图片上传功能,仅供参考. <!DOCTYPE html> <html> <head> <meta chars ...
- vue 图片上传功能
这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: <ul class="clearfix"> ...
- thinkphp达到UploadFile.class.php图片上传功能
片上传在站点里是非经常常使用的功能.ThinkPHP里也有自带的图片上传类(UploadFile.class.php) 和图片模型类(Image.class.php).方便于我们去实现图片上传功能,以 ...
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(七)图片上传功能
日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...
- PHP语言学习之php做图片上传功能
本文主要向大家介绍了PHP语言学习之php做图片上传功能,通过具体的内容向大家展示,希望对大家学习php语言有所帮助. 今天来做一个图片上传功能的插件,首先做一个html文件:text.php < ...
- [Ting's笔记Day8]活用套件carrierwave gem:(3)Deploy图片上传功能到Heroku网站
前情提要: 身为Ruby新手村民,创造稳定且持续的学习步调很重要,我用的方法就是一周在IT邦写三篇笔记,希望藉由把笔记和遇到的bug记录下来的过程,能帮助到未来想用Ruby on Rails架站的新手 ...
- 给DEDECMS广告管理中增加图片上传功能
dedecms的广告管理功能稍微有点次,本文就是在dedecms广告管理原有的基础上增加广告图片上传功能. 安装方法,对应自己的dedecms版本下载对应的编码然后解压把里面的文件放在后台目录覆盖即可 ...
- 前端丨如何使用 tcb-js-sdk 实现图片上传功能
前言 tcb-js-sdk 让开发者可以在网页端使用 JavaScript 代码服务访问云开发的服务,以轻松构建自己的公众号页面或者独立的网站等 Web 服务.本文将以实现图片上传功能为例,介绍 tc ...
随机推荐
- windows共享文件夹
net share 查看本地共享文件夹 我们想要删除这些链接,删除所有的共享目录链接命令是: net use * /d 如果只是想删除单个共享目录的链接,那么命令是: net use \\主机名或IP ...
- 从零开始学安全(四十四)●TCP三次握手四次挥手
wireshark:Beyond Compare是一个网络封包分析软件.网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料.Wireshark使用WinPCAP作为接口,直接与 ...
- 学JAVA第十七天,接口与抽象方法
JAVA接口可以让代码更加有合理的规范性,就想一个项目小组,组长要负责把成员的代码整合,但是每个成员写的方式都是按照他们自己的想法来写的, 所以,整合起来就非常麻烦. 但是,如果我们的组长制作了一个接 ...
- Linux IO模型(同步异步阻塞非阻塞等)的几篇好文章
聊聊同步.异步.阻塞与非阻塞聊聊Linux 五种IO模型聊聊IO多路复用之select.poll.epoll详解
- js之制作简易红绿灯
HTML代码: 在一个div容器内,设置3个span <body> <div id="i1"> <span class="light red ...
- 从零开始搭建服务器部署web项目
前言 该教程旨在完整描述建站过程,会将博主踩过的坑尽量详细的罗列出来.整个建站流程相对较为庞大,因此做了分解,同时适合大家有针对性的查询感兴趣的部分. 一.如何拥有自己的云服务器. 二.域名的购买与解 ...
- SQL 知道字段名 全表搜索此字段属于哪个表
SELECT name FROM sysobjects WHERE id IN (SELECT ID FROM syscolumns WHERE name='字段名')
- Navicat 进行数据库自动备份
今天经历一次数据库丢库事件,顿时觉得定时备份数据库很重要. 但是每天自己手动备份实在是太麻烦了,于是乎,想到用计划任务进行每天定时自动备份. 发现Navicat自带就有备份 还可以直接计划任务,贼方 ...
- [JSOI2008]Blue Mary的旅行
嘟嘟嘟 看\(n\)那么小,就知道是网络流.然后二分,按时间拆点. 刚开始我看成所有航班一天只能起飞一次,纠结了好一会儿.但实际上是每一个航班单独考虑,互不影响. 建图很显然,拆完点后每一个点的第\( ...
- git 本地代码冲突解决,强制更新
git reset soft,hard,mixed之区别深解 git reset --hard 强制更新覆盖本地 GIT reset命令,似乎让人很迷惑,以至于误解,误用.但是事实上不应该如此难 ...