H5前端上传文件的几个解决方案
目前,几个项目中用到了不同的方法,总结一下分享出来。
第一种,通过FormData来实现。
首先,添加input控件file。
<input type="file" name="uploadFile1" id="uploadFile1" runat="server" value="" multiple accept="image/jpg,image/jpeg,image/png,image/bmp,video/*"/>
然后添加对应的前端代码。
var input = document.getElementById("uploadFile"); var getOnloadFunc = function (aImg) {
return function (evt) {
aImg.src = evt.target.result;
};
}
input.addEventListener("change", function (evt) {
for (var i = 0, numFiles = this.files.length; i < numFiles; i++) {
var file = this.files[i]; var img = document.createElement("img");
$(".tp").append(img); var reader = new FileReader();
reader.onload = getOnloadFunc(img);
reader.readAsDataURL(file); alert(file.name); var fd = new FormData();
// 直接传递file对象到后台
fd.append("image", file);
fd.append("guanId", $("input[name=commonGuanId]").val()); $.ajax({
url : '/tools/submit_ajax.ashx?action=sign_upload',
type : 'POST',
data : fd,
processData: false,
contentType: false,
timeout : 10000,
success : function(data) {
var mydata = JSON.parse(data); if (mydata.status == 1) {
alert("上传成功");
} else {
alert("失败,请稍后重试!"); }
},
error : function(xhr,textStatus){
//alert('上传失败,请稍后重试'); }
});
}
}, false);
第二个,微信JSSDK接口,这个用起来比较方便,但是必须在微信的环境中应用,有局限性。
wx.config({
debug: false,
appId: '<% = config.appId%>',
timestamp: '<% = config.timestamp%>',
nonceStr: '<% = config.nonceStr%>',
signature: '<% = config.signature%>',
jsApiList: ['chooseImage',
'previewImage',
'uploadImage',
'downloadImage'
]
}); var serverIds = ""
function uploadImg() {
if(serverIds!="")
{
serverIds="";
}
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表
syncUpload(localIds); // localId可作为img标签的src属性显示图片
}
});
} function syncUpload(localIds) {
var localId = localIds.pop();
wx.uploadImage({
localId: localId, // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端serverId
serverIds = serverIds + serverId + ","; if (localIds.length > 0) {
syncUpload(localIds);
} else {
$.ajax({
type: "POST",
url: "/tools/submit_ajax.ashx?action=img_upload",
dataType: "json",
data: {
"serverIds":serverIds
},
timeout: 20000,
success: function (data, textStatus) {
if(data.status==1){
$("#picname").attr("src", data.msg);
$("#hidImgUrl").attr("value",data.msg);
}else{
alert(data.msg);
}
},
error:function(data){
alert("系统错误,请刷新页面重试!");
}
});
}
}
});
};
H5前端上传文件的几个解决方案的更多相关文章
- H5+MUI上传文件
应用场景:MUI+H5+WEBAPI 今天在给我外甥女调手机端上传图片的时候,发现他是直接调用的MUI下的api,直接调取相册或者相机,到最后只看见了一个文件的路径,所以以前写的上传文件就不太好套上去 ...
- django-form.errors和前端上传文件
一.上传文件: 在相应的模型里面定义`FileField`或者是`ImageField`类型的字段,并且1.设置好`upload_to`参数来指定上传的路径. class User(models.Mo ...
- 前端上传文件 后端PHP获取文件
<body> <form action="03-post-file.php" method="post" enctype="mult ...
- web前端:上传文件夹(需支持多浏览器)
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...
- ASP.NET、JAVA跨服务器远程上传文件(图片)的相关解决方案整合
一.图片提交例: A端--提交图片 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string u ...
- HipChat上传文件报未知错误解决方案
前言 HipChat是Atlassian公司的一款团队协作即时通讯工具,服务端为Linux(官方给的服务端就是一个虚拟机),在Windows.Linux.Android.IOS.Mac等平台都有客户端 ...
- Web上传文件的三种解决方案
第一点:Java代码实现文件上传 FormFile file = manform.getFile(); String newfileName = null; String newpathname = ...
- 优秀的前端上传文件插件 web uploader
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...
- flask-admin fileadmin 上传文件,中文名的解决方案 重写部分secure_filename
class upload_view(FileAdmin): def _save_form_files(self, directory, path, form): super() filename = ...
随机推荐
- mybatis-java代码调用部分
只需要加入 mybatis-2.2.jar 和数据库驱动包即可 java代码实现的步骤 package com.yangwei.shop.test; import java.io.IOExcepti ...
- 【个人笔记】《知了堂》mysql表连接
为什么使用表连接 什么是表连接? 如果数据来自多个表,那么可以采用链接查询的方式来实现.因此表连接就是多个表连接合在一起实现查询效果 表连接的原理 表连接采用的是笛卡尔乘积,称之为横向连接. 笛卡尔乘 ...
- mongoDB学习手记2--建库、删库、插入、更新
上一篇 讲了在windows系统下的安装和启动,本文主要讲怎么建库.删库.插入.更新 在讲之前我们说一下mongoDB的一些基本概念,我们对比关系型数据库能更直观的理解 SQL术语/概念 Mongo ...
- android-蓝牙通信
一:简介 由于项目曾经想用蓝牙通信,但由于蓝牙传输速度比较慢,最终还是没有使用蓝牙,不过还是在空闲之余研究了蓝牙通信,鉴于目前网上蓝牙这块教程并不多,尤其是从蓝牙扫描,蓝牙配对,蓝牙通信等完整的教程更 ...
- Another Easy Problem fzu1753
Another Easy Problem Time Limit: 1000MS Memory Limit: 32768KB 64bit IO Format: %I64d & %I64u ...
- python采用 多进程/多线程/协程 写爬虫以及性能对比,牛逼的分分钟就将一个网站爬下来!
首先我们来了解下python中的进程,线程以及协程! 从计算机硬件角度: 计算机的核心是CPU,承担了所有的计算任务.一个CPU,在一个时间切片里只能运行一个程序. 从操作系统的角度: 进程和线程,都 ...
- thinkphp传参
use think\Request; 写法1: $parms=Request::instance()->param(); $param=$params['键值']; 写法2: $request= ...
- 在Ubuntu上安装Docker
原文链接:https://docs.docker.com/engine/installation/linux/ubuntu/ 这里记录的是社区版安装方式,由于平时只做开发使用所以不需要安装企业版, ...
- ajax url参数中文乱码解决方法
较好的处理办法,对js的url中的中文参数值使用两次encodeURI(),即encodeURI(encodeURI("url的中文参数值")) JS代码: var name=&q ...
- Nunit测试工具使用实例
前言: 本文主要是介绍了Nunit的基本使用,其中参详了很多已有的文章,由于最近要使用其进行测试,所以对网上的文章做了下整理,同时加入了一些自己的实践. NUnit的属性 TestFixture 它标 ...