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:/ ...
随机推荐
- CMDB反思1
由于,基本已经完成一期的功能开发,所以要继续CMDB的开发工作了. 最近看了不少CMDB相关的文章,也思考了不少,后面将所思所想(比较浅)记录一下. 发现很多内容都记录在Wiz上,抽空整理到博客中. ...
- css样式表中的样式覆盖顺序
刚才写zenktodo的时候,通过动态添加class的方式修改一个div的样式,总是不起作用. #navigator { height: 100%; width: 200; position: abs ...
- 关于LyX的一些小问题
LyX转HTML(MS WORD)的脚本elyxer的更新: 首先从官网下载最新版的软件包.解压后,在命令行下python install.py执行安装(直接双击install.py应该也可以),py ...
- 记录一次Android交叉编译ffmpeg排查错误
Android版本手机直播引擎中,引用了libvlc开源库.项目接过来,发现编译脚本中使用了很多用户名下的绝对路径.项目相关人离职,导致这个脚本实际上已经废掉.而且不知道相关路径下有没有其他文件和第三 ...
- av_interleaved_write_frame 网络不好的情况下返回较慢
用libvlc做直播推流引擎在网络较差的情况下,需要关闭直播,并且重新开播.这个过程中,推流引擎重启,需要的是快速响应.实际上测试结果发现,经常会发生引擎关闭接口卡住.后来跟踪代码,定位到s_rtmp ...
- Context Menu on DataGrid
应该设置 fitColumns: true 合并表头显示有问题 代码见示例
- 现代程序设计homework——04
题目: 详见:http://www.cnblogs.com/xinz/p/3341551.html 题目本身确实很难,“很难想到一个比较优雅的算法”,这是一个老师请来专门讲解这道题的大牛的原话.确实, ...
- 【转载】10个有用的du命令行
10 Useful du (Disk Usage) Commands to Find Disk Usage of Files and Directories The Linux “du” (Disk ...
- 绑定线程到特定CPU处理器
参考这篇文章 http://blog.chinaunix.net/uid-27761170-id-5050258.html 代码如下: #define _GNU_SOURCE #include < ...
- uLua学习笔记（三）：Unity3D和Lua之间的相互调用
这篇笔记主要集中学习一下uLua和Unity3D之间相互调用的方法,我们导入了uLua之后,现在会弹出一个类似学习屏幕的东西,如下: 先赞一个! Unity3D调用Lua Unity3D调用Lua的方 ...