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 ...
随机推荐
- Jquer + Ajax 制作上传图片文件
没什么 说的 直接 上代码 //选择图片并上传 function selectImg(node){ var f = node.value; var file = node.files[0]; if( ...
- js将一个数组分成多个数组
1,将数组array分成长度为subGroupLength的小数组并返回新数组 function group(array, subGroupLength) { let index = 0; let n ...
- 你真的懂JavaScript基础类型吗
夯实Javascript基础. 基本类型有六种: null,undefined,boolean,number,string,symbol. 基本类型的值是保存在栈内存中的简单数据段 基础类型特性 基础 ...
- 一起学Android之ProgressBar
本文简述在Android开发中进度条(ProgressBar)的常见应用,仅供学习分享使用. 概述 在Android开发中,进度条的使用场景有很多,如播放电影时可拖动的观看进度条,评分时使用的评分条, ...
- 人脸识别ArcFace C#DEMO 开发应用全过程
手上有一个项目,需要检验使用本程序的,是否本人!因为在程序使用前,我们都已经做过头像现场采集,所以源头呢是不成问题的,那么人脸检测,人脸比对,怎么办呢?度娘了下,目前流行的几个人脸检测,人脸比对核心, ...
- Jmeter Beanshell 用法
Beanshell 的用法 什么是beanshell Beanshell是一种完全符合java语法的脚本语言,并且拥有自己的内置对象和语法 Beanshell是用java写的,一个小型嵌入式java源 ...
- ext整合highcharts实现饼图
extjs自身有图表的功能,但是与highcharts和echarts相比,ext不如它们功能强大.样式美观. 公司项目的前端框架使用的是ext,所以就有了ext整合第三方图表插件的需求. 笔者会一点 ...
- C盘突然报警,空间不足,显示成红色了
1.清理系统垃圾文件 将如下命令保存到一个bat文件中,执行,删除垃圾文件 @echo off net share c$ /del net share d$ /del net share e$ /de ...
- SQL 获取时间段内日期列表
declare @start date,@end date; set @start='2010-01-01'; set @end='2010-02-01'; --获取时间段内日期列表 select [ ...
- vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...