Jquery+ajaxfileupload上传文件
1、说明
ajaxfileupload.js是一款jQuery插件,用于通过ajax上传文件。
下载地址:http://files.cnblogs.com/files/lengzhan/ajaxfileupload.zip
2、使用方法
首先引用js脚本
<script src="Scripts/jquery/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btnUpload").on('click', DoUpload);
}) function DoUpload() {
var image = $("#txtPath").val();
if ($.trim(image) == "") {
alert("请选择文件!");
return;
} $.ajaxFileUpload(
{
url: 'Handler/FileUploadHandler.ashx?type=Attachment',
secureuri: false,
fileElementId: $("#fleFile").attr("id"),
dataType: 'json',
success: function (data, status)
{
if (data.url === "") {
alert("上传失败!");
} else {
alert("上传成功!");
}
},
error: function (result) {
alert("上传失败!");
}
});
}
</script>
然后是html代码
<div id="ImageMaintain">
<input type="hidden" name="hidImgUrl" id="hidImgUrl" value="" />
<div id="uploadarea">
<input id="txtPath" type="text" disabled="disabled" />
<input id="fleFile" type="file" name="fleFile" onchange="document.getElementById('txtPath').value = this.value;return false;" />
<input id="btnSelect" type="button" value="选择" class="button" style="width: 60px;" />
<input id="btnUpload" type="button" value="上传" class="button" style="width: 60px;" />
</div>
</div>
最后是一般处理程序
<%@ WebHandler Language="C#" Class="FileUploadHandler" %> using System;
using System.Web;
using System.IO; public class FileUploadHandler : IHttpHandler { public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain"; string strMessage = string.Empty;
string strUrl = string.Empty;
string strFloderName = "Upload";
string strNewFilePath = string.Empty;
string strFileName = Path.GetFileName(context.Request.Files[0].FileName);
string strOldFileName = Path.GetFileName(context.Request.Files[0].FileName);
int intFileSize = context.Request.Files[0].ContentLength;
string data = "";
if (context.Request.Files.Count > 0 && strFileName != "")
{
string strExt = Path.GetExtension(context.Request.Files[0].FileName);
strExt = strExt.TrimStart('.').ToLower();
strFloderName = strFloderName + "/" + "File/" + DateTime.Now.ToString("yyyyMMdd");
string path = HttpContext.Current.Server.MapPath("../" + strFloderName);
try
{
strFileName = Guid.NewGuid().ToString() + ("." + strExt);
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
strNewFilePath = Path.Combine(path, strFileName);
context.Request.Files[0].SaveAs(strNewFilePath);
}
catch (Exception ex)
{
strMessage = "保存失败";
strUrl = string.Empty;
}
}
strMessage = "";
strUrl = strFloderName + "/" + strFileName; data = "{\"strUrl\":\"" + strUrl + "\",\"strMessage\":\"" + strMessage + "\"}";
context.Response.Write(data);
context.Response.End();
} public bool IsReusable {
get {
return false;
}
} }
3、图片上传
这里会把DEMO上传至博客园,下载地址:http://files.cnblogs.com/files/lengzhan/UploadAjaxFile.zip
特别注意:这里需要提醒一下各位,默认情况下可上传的最大文件为4M,如果要上传大于4M文件,那么需要在web.config中的httpRuntime元素中添加maxRequestLength属性设置大小,同时为了支持大文件上传超时可以添加executionTimeout属性设置超时时间
<httpRuntime useFullyQualifiedRedirectUrl="true" executionTimeout="120" maxRequestLength="20480"/> 20480=20M
Jquery+ajaxfileupload上传文件的更多相关文章
- ajaxFileUpload上传文件简单示例
写在前面: 上传文件的方式有很多,最近在做项目的时候,一开始也试用了利用jquery的插件ajaxFileUpload来上传大文件,下面,用一个上传文件的简单例子,记录下,学习的过程~~~ 还是老样子 ...
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- jquery.uploadify上传文件配置详解(asp.net mvc)
页面源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- ajaxFileUpload上传文件后提示下载的问题
在某些版本浏览器下ajaxFileUpload上传文件会提示下载, 1:为什么? 可以观察到,即便返回 JsonResult 在返回的头中也没有任何消息体,直接理解为文本了. 2:解决方案 前端: f ...
- 在使用 AjaxFileUpload 上传文件时,在项目发布到 iis 后,图片不能预览
在使用 AjaxFileUpload 上传文件时,图片已经上传成功了,在站点没有发布时,可以预览,可是在项目发布到 iis 后,图片就不能预览,在网上找了很多的方案也没解决,最后的解决方案如下: 1 ...
- 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除(逻辑删除) 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据
1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...
- 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址 ...
- jQuery ajax上传文件实例
jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...
- Jquery异步上传文件
我想通过jQuery异步上传文件,这是我的HTML: 1 2 3 <span>File</span> <input type="file" id=&q ...
随机推荐
- react 创建组件 (三)PureComponet
我们知道,当组件的props或者state发生变化的时候:React会对组件当前的Props和State分别与nextProps和nextState进行比较,当发现变化时,就会对当前组件以及子组件进行 ...
- C语言之基本算法34—分解质因数(方法一)
//矩阵基础 /* ================================================================== 题目:输入一个正整数.将其分解为质因式,如:6 ...
- android menu事件
@Override public boolean onCreateOptionsMenu(Menu menu) { menu.add(0,1,1,R.string.exit); menu.add(0, ...
- Gym - 101164C - Castle KMP
题目链接:传送门 题解: 利用KMP的fail失配数组,快速找到当前后缀与前缀的公共前缀点 #include<bits/stdc++.h> using namespace std; #pr ...
- hadoop报JAVA_HOME is not set暂时解决办法
直接在etc/hadoop/hadoop-env.sh中 export JAVA_HOME=XXX
- Oracle数据库案例整理-Oracle系统执行时故障-断电导致数据文件状态变为RECOVER
1.1 现象描写叙述异常断电.数据库数据文件的状态由ONLINE变为RECOVER. 系统显演示样例如以下信息:SQL>selectfile_name,tablespace_name, ...
- sjtu oj 1201. SuperXOR
Description Pangzi recently realized that bitwise XOR operation is just an addition without carries. ...
- sql索引原理以及优化
http://itindex.net/detail/52237-%E7%B4%A2%E5%BC%95-%E5%8E%9F%E7%90%86 http://itindex.net/detail/5171 ...
- HDU3667 Transportation —— 最小费用流(费用与流量平方成正比)
题目链接:https://vjudge.net/problem/HDU-3667 Transportation Time Limit: 2000/1000 MS (Java/Others) Me ...
- html5--6-59 其他常用CSS属性
html5--6-59 其他常用CSS属性 实例 学习要点 了解opacity属性:透明度设定 了解cursor属性:自定义鼠标样式 了解CSS新单位rem和em的区别 了解轮廓outline的设置 ...