Jquery_异步上传文件多种方式归纳
1.不用任何插件，利用iframe，将form的taget设为iframe的name，注意设为iframe的id是没用的，跟网上很多说的不太一致
iframe_upload.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form id="form1" method="post" action="Upload.aspx" enctype="multipart/form-data" target="uploadframe">
<input type="file" id="upload" name="upload" />
<input type="submit" value="Upload" />
</form>
<iframe id="uploadframe" name="uploadframe" style="visibility:hidden"></iframe>
</body>
</html>
Upload.aspx <%@ Page Language="C#" %>
<%
Response.ClearContent();
try
{
if (Request.Files.Count == 0) Response.Write("Error");
else
{
HttpPostedFile file= Request.Files[0]; string ext = System.IO.Path.GetExtension(file.FileName);
string folder = HttpContext.Current.Server.MapPath("~\\Upload\\");
string path = folder + Guid.NewGuid().ToString() + ext;
file.SaveAs(path); Response.Write("Success");
}
}
catch
{
Response.Write("Error");
}
%>
2.利用ajaxupload.js
Default.aspx <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Ajax Upload Demo</title>
<script type="text/javascript" src="Scirpt/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="Scirpt/ajaxupload.js"></script>
<script type="text/javascript">
$(function ()
{
// 创建一个上传参数
var uploadOption =
{
// 提交目标
action: "Upload.aspx",
// 自动提交
autoSubmit: false,
// 选择文件之后…
onChange: function (file, extension) {
if (new RegExp(/(jpg)|(jpeg)|(bmp)|(gif)|(png)/i).test(extension)) {
$("#filepath").val(file);
} else {
alert("只限上传图片文件，请重新选择！");
}
},
// 开始上传文件
onSubmit: function (file, extension) {
$("#state").val("正在上传" + file + "..");
},
// 上传完成之后
onComplete: function (file, response) {
if (response == "Success") $("#state").val("上传完成！");
else $("#state").val(response);
}
} // 初始化图片上传框
var oAjaxUpload = new AjaxUpload('#selector', uploadOption); // 给上传按钮增加上传动作
$("#up").click(function ()
{
oAjaxUpload.submit();
});
});
</script>
</head>
<body>
<div>
<label>一个普通的按钮：</label><input type="button" value="选取图片" id="selector" />
<br />
<label>选择的图片路径：</label><input type="text" readonly="readonly" value="" id="filepath" />
<br />
<label>不是submit按钮：</label><input type="button" value="上传" id="up" />
<br />
<label>上传状态和结果：</label><input type="text" readonly="readonly" value="" id="state" />
</div>
</body>
</html>
Upload.aspx <%@ Page Language="C#" %>
<%
Response.ClearContent();
try
{
if (Request.Files.Count == 0) Response.Write("Error");
else
{
HttpPostedFile file= Request.Files[0]; string ext = System.IO.Path.GetExtension(file.FileName);
string folder = HttpContext.Current.Server.MapPath("~\\Upload\\");
string path = folder + Guid.NewGuid().ToString() + ext;
file.SaveAs(path); Response.Write("Success");
}
}
catch
{
Response.Write("Error");
}
%>
3.利用ajaxfileupload.html
ajaxfileupload.html <html>
<head>
<title>Ajax File Uploader Plugin For Jquery</title>
<script src="Scirpt/jquery.js" type="text/javascript"></script>
<script src="Scirpt/ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
function ajaxFileUpload() {
$("#loading")
.ajaxStart(function () {
$(this).show();
})
.ajaxComplete(function () {
$(this).hide();
}); $.ajaxFileUpload
(
{
url: 'Upload3.aspx',
secureuri: false,
fileElementId: 'fileToUpload',
dataType: 'json',
data: { name: 'logan', id: 'id' },
success: function (data, status) {
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
//alert(data.error.toJSONString());
} else {
alert(data.msg);
//alert(data.toJSONString());
}
}
},
error: function (data, status, e) {
//alert(e.toJSONString());
alert(e);
}
}
) return false; }
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<h1>
Ajax File Upload Demo</h1>
<img id="loading" src="loading.gif" style="display: none;">
<form name="form" action="" method="post" enctype="multipart/form-data">
<table cellpadding="0" cellspacing="0" class="tableForm">
<thead>
<tr>
<th>
Please select a file and click Upload button
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">
Upload</button>
</td>
</tr>
</tfoot>
</table>
</form>
</div>
</body>
</html>
Default.aspx.cs using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls; namespace Upload
{
public partial class Upload3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
HttpFileCollection files = HttpContext.Current.Request.Files;
if (null == files || files.Count == 0)
{
//DoNothing
}
else
{
string msg = null;
msg = UploadMain();
//Response.ContentType = "application/json";
Response.Write(msg);
Response.End();
}
} private string UploadMain()
{
HttpPostedFile file = Request.Files[0]; string ext = System.IO.Path.GetExtension(file.FileName);
string folder = HttpContext.Current.Server.MapPath("~\\Upload\\");
string fileName = Guid.NewGuid().ToString() + ext;
string path = folder + fileName;
file.SaveAs(path); string message = getMsg("0047 File Upload Success!", null); return message;
} private string getMsg(string msg, string err)
{
if (String.IsNullOrEmpty(msg))
{
msg = "";
}
if (String.IsNullOrEmpty(err))
{
err = "";
} string message = "{";
message += "msg:'#msg#',";
message += "error:'#err#'";
message += "}"; return message.Replace("#msg#", msg).Replace("#err#", err); }
}
}
4.html5+html5uploader.js
html5uploder.htm <!DOCTYPE html>
<html>
<script src="Scirpt/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="Scirpt/jquery.html5uploader.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#multiple").html5Uploader({
postUrl: "Upload2.aspx",
onSuccess: function (a, b, c) {
var img = $('<img/>').attr('src', "http://localhost:83/Upload/"+c).css('width', '140px').css('height', '140px').css('margin', '10px');
$('#content').append(img);
}
});
});
</script>
<head>
<title></title>
</head>
<body>
<input id="multiple" type="file" accept="image/*" multiple />
<div id="content"></div>
</body>
</html>
Default2.aspx <%@ Page Language="C#" %>
<%
Response.ClearContent();
try
{
if (Request.Files.Count == 0) Response.Write("Error");
else
{
HttpPostedFile file= Request.Files[0]; string ext = System.IO.Path.GetExtension(file.FileName);
string folder = HttpContext.Current.Server.MapPath("~\\Upload\\");
string fileName = Guid.NewGuid().ToString()+ext;
string path = folder + fileName;
file.SaveAs(path); Response.Write(fileName);
}
}
catch
{
Response.Write("Error");
}
%>
Jquery_异步上传文件多种方式归纳的更多相关文章
- Asp.Net Mvc异步上传文件的方式
今天试了下mvc自带的ajax,发现上传文件时后端action接收不到文件, Request.Files和HttpPostedFileBase都接收不到.....后来搜索了下才知道mvc自带的Ajax ...
- ajax异步上传文件FormDate方式，html支持才可使用
今天需要做一个头像的预览功能,所以我想到了异步上传文件. 总结几点: 异步上传难点: 文件二进制流如何获取 是否需要设置表单的头,就是content-Type那里.异步,所以无所谓了吧. 其他就差不多 ...
- 前端之web上传文件的方式
前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构造请求上传文件 1. web上传 ...
- 【转】JQuery插件ajaxFileUpload 异步上传文件（PHP版）
前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
- 利用jquery.form实现异步上传文件
实现原理 目前需要在一个页面实现多个地方调用上传控件上传文件,并且必须是异步上传.思考半天,想到通过创建动态表单包裹上传文件域,利用jquery.form实现异步提交表单,从而达到异步上传的目的,在上 ...
- 第九篇：web之前端之web上传文件的方式
前端之web上传文件的方式 前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构 ...
- spingMVC异步上传文件
框架是个强大的东西,一般你能想到的,框架都会帮你做了,然后只需要会用就行了,spingmvc中有处理异步请求的机制,而且跟一般处理请求的方法差别不大,只是多了一个注解:spingmvc也可以将stri ...
- JQuery插件ajaxFileUpload 异步上传文件（PHP版）
太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...
- jquery ajaxFileUpload异步上传文件
ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http:/ ...
随机推荐
- linux常用命令之--文件打包与压缩命令
linux的文件打包与压缩命令 1.压缩与解压命令 compress:用于压缩指定的文件,后缀为.z 其命令格式如下: compress [-d] 文件名 常用参数: -d:解压被压缩的文件(.z为后 ...
- uC/OS - III 移植 IAR平台
关于移植uC/OS-III 网上已经有很多教程了此处只是做个记录 首先下载源码然后解压得到下面的文件: 然后在模版工程里新建各种文件夹: 最后全部都添加进工程: OK了,编译一下,惊呆了,竟然 0错误 ...
- LeetCode题解——4Sum
题目: 给定一个数组,找出其中和为0的所有4个数组合,每个组合内的4个数非递降. 解法: ①先排序,然后利用4个指针,前两个遍历,后两个在第二个指针之后的部分里夹逼,时间O(N3). ②或者利用一个哈 ...
- 【SummaryPlan】Summary of Feb & Plan of March——How to 'just do it'?
Why I choose to be a graduate student from an undergraduate student? It’s time to applying for inter ...
- （转载）OC学习篇之---类的初始化方法和点语法的使用
昨天介绍了OC中类的定义和使用,今天我们来继续学习类的初始化方法和点语法的使用. 一.首先来看一下类的初始化方法 在Java中我们知道一个每个类都有构造方法,这里的初始化方法就是和构造方法一个概念的, ...
- flot图表的使用
Flot是一套用Javascript写的绘制图表用的函式库, 专门用在网页上执行绘制图表功能, 由于Flot利用jQuery所以写出来的, 所以也称它为jQuery Flot ,它的特点是体积小.执行 ...
- COS回应7大质疑
Apple过于封闭,没啥朋友,这家伙应该比较高傲,曾和Intel,IBM and so on..一起玩过!Google过于开放,狐朋狗友,友人泛滥,殃及ecosystem,弊端已显,祸水将至.COS奉 ...
- 第二百九十五天 how can i 坚持
买了个小米电话卡,写的让周六日送,非得今天给送来,浪费了1块钱.买回来还没法激活,这.. 昨天差点挂掉,今天感觉好多了,不过今天好冷,回来快冻死了. 今天啊,年终奖订下来了,没有想象的高 啊,有点小失 ...
- 现代程序设计 homework-09
现代程序设计 homework-09 这次作业是要求将homework-02做成一个可演示的应用,目的是为了让用户看到程序的计算步骤以及中间结果. 借此机会也学了一下JavaScript,感觉总结的地 ...
- Java邮件服务学习之三：邮箱服务客户端-Java Mail
一.java mail的两个JAR包 1.mail.jar:不在JDK中,核心功能依赖JDK4及以上,该jar包已经加入到java EE5: 下载地址:http://www.oracle.com/te ...