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上传文件的更多相关文章

  1. ajaxFileUpload上传文件简单示例

    写在前面: 上传文件的方式有很多,最近在做项目的时候,一开始也试用了利用jquery的插件ajaxFileUpload来上传大文件,下面,用一个上传文件的简单例子,记录下,学习的过程~~~ 还是老样子 ...

  2. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  3. jquery.uploadify上传文件配置详解(asp.net mvc)

    页面源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  4. ajaxFileUpload上传文件后提示下载的问题

    在某些版本浏览器下ajaxFileUpload上传文件会提示下载, 1:为什么? 可以观察到,即便返回 JsonResult 在返回的头中也没有任何消息体,直接理解为文本了. 2:解决方案 前端: f ...

  5. 在使用 AjaxFileUpload 上传文件时,在项目发布到 iis 后,图片不能预览

    在使用 AjaxFileUpload  上传文件时,图片已经上传成功了,在站点没有发布时,可以预览,可是在项目发布到 iis 后,图片就不能预览,在网上找了很多的方案也没解决,最后的解决方案如下: 1 ...

  6. 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除(逻辑删除) 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据

    1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...

  7. 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传

    使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址  ...

  8. jQuery ajax上传文件实例

    jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...

  9. Jquery异步上传文件

    我想通过jQuery异步上传文件,这是我的HTML: 1 2 3 <span>File</span> <input type="file" id=&q ...

随机推荐

  1. 源代码方式向openssl中加入新算法完整具体步骤(演示样例:摘要算法SM3)【非engine方式】

    openssl简单介绍 openssl是一个功能丰富且自包括的开源安全工具箱.它提供的主要功能有:SSL协议实现(包括SSLv2.SSLv3和TLSv1).大量软算法(对称/非对称/摘要).大数运算. ...

  2. EF使用自定义字符串连接数据库

    edmx的构造函数: public TestCheckUpdatesEntities(): base(Config.DataBaseConnectionString(), "TestChec ...

  3. 【转载】一致性哈希算法(consistent hashing)

    一致性哈希算法在1997年由麻省理工学院提出的一种分布式哈希(DHT)实现算法,设计目标是为了解决因特网中的热点(Hot spot)问题,初衷和CARP十分类似.一致性哈希修正了CARP使用的简 单哈 ...

  4. The most widely used name server software: BIND

    https://www.isc.org/downloads/bind/ The most widely used name server software: BIND BIND is open sou ...

  5. zookeeper 服务端上下线,客户端感知

    package pfs.y2017.m11.zookeeper.demo03; import java.util.ArrayList; import java.util.List; import or ...

  6. Android NDK JNI WARNING: illegal start byte 0x

    今天攻克了JNI WARNING: illegal start byte 0x81这个问题. 问题出现的现象是通过jni调用加密方法,调用之后返回密文内容,结果就出现这个问题. 在国外查找一段时间之后 ...

  7. Vs2012在Linux开发中的应用(6):改写Makefile项目的Build过程

    MSBUILD的编译过程实际上是依据一系列的targets文件定义的.当我们在IDE运行生成.批生成.清理命令的时候.VS会查找这些命令相应的Task并运行它,以下我们逐个分析这个过程. 当运行生成操 ...

  8. 文件宝局域网传输/播放功能使用帮助(Windows电脑用户)

    使用局域网账户密码登录,可以访问电脑上所有文件 使用游客无账户密码登录,只能访问电脑上指定共享文件夹的文件. 1.怎么设置共享文件夹请参考: 方法1 1.在文件资源管理器中选择自己一个想共享的文件夹, ...

  9. Java程序员从笨鸟到菜鸟之(十五)Html基础积累总结(下)

     本文来自:曹胜欢博客专栏.转载请注明出处:http://blog.csdn.net/csh624366188 一:表格 1.表格的基本语法 <table>...</table> ...

  10. Pattern: Microservice Architecture

    Microservice Architecture pattern http://microservices.io/patterns/microservices.html Context You ar ...