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:/ ...
随机推荐
- （一）使用Blender导出GameMaker支持的模型脚本
源于YOYO论坛帖子:http://gmc.yoyogames.com/index.php?showtopic=603723 既然想做3D,那就先从模型的导入开始,具体的源文件,可以在“(二)使用等高 ...
- ASP.NET MVC3 系列教程 – Web Pages 1.0
http://www.cnblogs.com/highend/archive/2011/04/14/aspnet_mvc3_web_pages.html I:Web Pages 1.0中以“_”开头的 ...
- syscolumns、sysconstraints、sysobjects
1.根据表名查询对象ID SELECT OBJECT_ID('Production.Product') 结果:1429580131 不能作为输入参数:列名.约束名 能作为输入参数:表名 2.根据对象I ...
- openstack 整合
- 转载-清除Linux中MySQL的使用痕迹~/.mysql_history
原文地址:清除Linux中MySQL的使用痕迹~/.mysql_history 作者:RogerZhuo 原贴:http://bbs.chinaunix.net/thread-3676498-1-1. ...
- SSH与SSL
1. SSL SSH 即Secure Shell,它主要由三部分组成: 第一部分:连接协议 [SSH-CONNECT] 将多个加密隧道分成逻辑通道.它运行在用户认证协议上.它提供了交互式登录话路.远程 ...
- 嵌入式LINUX入门到实践（二）
这篇中将围绕韦东山LINUX第二部分教程源码,对IIC协议进行程序实现上的分析. /* I2C registers */#define IICCON (*(volatile unsigned ...
- UVaLive 7270 Osu! Master (统计)
题意:给定 n 个元素,有的有一个值,如果是 S 那么是单独一个,其他的是一个,求从 1 开始的递增的数量是多少. 析:那么S 是单独的,要统计上,既然是从 1 开始递增的,那么再统计 1 的数量即可 ...
- [PoC]某B2B网站的一个反射型XSS漏洞
Author: Charlie 个人微博:http://YinYongYou.com 转载请注明出处. 工作过程纯粹手贱,测试了一下.然后发现了这么一个东西.有心利用能造成大范围影响.如可以自由修改用 ...
- GMT 绘制台站分布图
set ps=test.psset J=M4i set R=73/135.5/10/54rem gmt gmtset FONT_ANNOT_PRIMARY 8p FONT_TITLE 8p gmt ...