本想着文件上传是一件挺简单的事，不过是获取文件地址保存到服务器而已，然而事实并非如此。

我信心满满的写下input type="file"，alert input 的value，打开页面选择了张图片，在获取地址的时候，问题出现了，为什么得到的地址是"C:\fakepath\*.jpg"，带着疑惑百度了一圈，原来这是浏览器的安全机制，不让获取文件的物理路径，所以以假路径代替。顿时信心锐减，出师不利啊，看来是轻敌了。

不过百度是个好老师，总能教给你解决问题的办法，一番搜索后，发现了一款上传神器，jquery.form.js，其ajaxSubmit()方法是专门为解决上传问题而生的。

下面就展示一下上传的过程吧。

1.html源码

要上传图片，首先要把file放在form里，异步提交表单，form中需要添加 method="post" enctype="multipart/form-data" 等属性

<!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>upload</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>

    <form id="uploadform" method="post" enctype="multipart/form-data">

    <input name="uploadimg" id="uploadimg" type="file" style="width: 100%" />

    </form>

    <img id="myimg" style="width: 80px; height: 80px;border:solid 1px #ccc; border-radius:40px; background-color:#ccc;" />

    <script type="text/javascript" src="js/jquery-1.4.1.js"></script>

    <script type="text/javascript" src="js/jquery.form.js"></script>

    <script type="text/javascript" src="js/upload.js"></script>

</body>

</html>

2.Js文件upload.js代码

$(function () {

    //file内容改变触发表单提交事件

    $("#uploadimg").change(function () {

        $("#uploadform").ajaxSubmit({

            url: "Upload.ashx?action=upload",

            type: "post",

            beforeSubmit: function () {

                $("#myimg").attr("src", "images/loading.gif");

            },

            success: function (url) {

                if (url) {

                    setTimeout(function () {

                        $("#myimg").fadeOut(1000, function () {

                            $("#myimg").attr("src", url);

                        });

                        $("#myimg").fadeIn(1000);

                    }, 100);

                }

            }

        });

        return false;

    });

});

3.一般处理程序Upload.ashx代码

<%@ WebHandler Language="C#" Class="Upload" %>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.IO;

public class Upload : IHttpHandler {

    public void ProcessRequest (HttpContext context) {

        context.Response.ContentType = "text/html"; //设置response的返回值类型text/html，否则会自动加<pre>标签

        string act = context.Request.QueryString["action"].ToString();

        switch (act)

        {

            case "upload":

                ImgUpload(context);

                break;

        }

    }

    /// <summary>

    /// 上传图片至服务器

    /// </summary>

    /// <param name="context"></param>

    public void ImgUpload(HttpContext context)

    {

        List<string> filelist = new List<string>();

        HttpFileCollection files = context.Request.Files;

        for (int i = ; i < files.Count; i++)

        {

            string filename = System.IO.Path.GetFileName(files[i].FileName);

            filelist.Add(filename);

            string imgpath = "images\\upload\\";

            string bootpath = HttpRuntime.AppDomainAppPath + imgpath;

            string name = DateTime.Now.ToString("yyyy-MM-dd_HHmmss") + "_" + filename;

            if (!File.Exists(bootpath + name))

            {

                files[i].SaveAs(bootpath + name);

            }

            string localPath = imgpath + name;

            context.Response.Write(localPath);

            context.Response.End();

        }

    }

    public bool IsReusable {

        get {

            return false;

        }

    }

}

4.附上Demo

此demo是网站，下载后发布在iis或者新建个解决方案把它加进去就可以浏览了。

http://files.cnblogs.com/Jackie-sky/Upload.rar

如果大家在上传方面有其它的解决方法，望不吝赐教。

使用jquery.form.js文件进行文件上传的更多相关文章

  1. 使用jquery.form.js提交表单上传文件

    方法: 1.formSerilize()  用于序列化表单中的数据,并将其自动整理成适合AJAX异步请求的URL地址格式. 2.clearForm()   清除表单中所有输入值的内容. 3.restF ...

  2. jquery.form.js不能解决连接超时（timeout）的解决方法

    最近在使用jquery.form.js提交包含文件的表单时,碰到了一个问题:当碰上网速较慢时,而我们又设置了timeout时,例如: var options = { timeout: 3000 //限 ...

  3. 文件上传时jquery.form.js中提示form.submit SCRIPT5: 拒绝访问

    利用其它控件触发file的click事件来选择文件后,使用jquery.form.js中的submit方法提交时IE报错:form.submit SCRIPT5: 拒绝访问,其它浏览器正常, < ...

  4. 文件上传功能 -- jquery.form.js/springmvc

    距离上一篇 文件上传下载样式 -- bootstrap(http://www.cnblogs.com/thomascui/p/5370947.html)已经三周时间了,期间一直考虑怎么样给大家提交一篇 ...

  5. js 使用jquery.form.js文件上传

    1.文件上传,使用jquery.form.js插件库 <!DOCTYPE html> <html> <head> <meta charset="UT ...

  6. 关于JQuery.form.js异步上传文件点滴

    好久没动代码了,前几天朋友委托我帮忙给做几个页面,其中有个注册带图片上传的页面.已之前的经验应该很快就能搞定,没想到的是搞了前后近一天时间.下面就说说异步上传的重要几个点,希望自己下次遇到此类问题的时 ...

  7. jquery.form.js官方插件介绍Form插件，支持Ajax，支持Ajax文件上传

    jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传 http://www.malsup.com/jquery/form/#getting-started [JQu ...

  8. jquery.form.js ajax提交上传文件

    项目中最近有用到表单提交,是带有图片上传的表单录入,需要ajax异步提交,网上找了好多例子都是只能提交上传字段一个信息的,这里整理一下.表单里有普通文本信息字段也有图片上传字段. 1.jsp代码--引 ...

  9. Jquery ajaxfileupload.js结合.ashx文件实现无刷新上传

    先上几张图更直观展示一下要实现的功能,本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...

随机推荐

  1. poj 3683 2-sat建图+拓扑排序输出结果

    发现建图的方法各有不同,前面一题连边和这一题连边建图的点就不同,感觉这题的建图方案更好. 题意:给出每个婚礼的2个主持时间,每个婚礼的可能能会冲突,输出方案. 思路:n个婚礼,2*n个点,每组点是对称 ...

  2. JavaScript学习日志（六）：事件

    这篇随笔,深恶痛绝,敲到快结束的时候,凌晨00:19,突然闪退,也不知道是Mac的原因还是chrome的原因,重新打开的时候,以为自动保存有效果,心想没关系,结果他么的只保存了四分之一,WTF?!!! ...

  3. python __name__ 变量的含义

    python __name__ 变量的含义 if __name__ == '__main__': tf.app.run() 当python读入程序时,会初始化一些系统变量.如果当前程序是主程序,__n ...

  4. Android学习记录：SQLite数据库、res中raw的文件调用

    SQLite数据库是一种轻量级的关系型数据库. 在android中保存数据或调用数据库可以利用SQLite. android中提供了几个类来管理SQLite数据库 SQLiteDatabass类用来对 ...

  5. NHibernate教程(21)——二级缓存（下）

    本节内容 引入 使用NHibernate二级缓存 启用缓存查询 管理NHibernate二级缓存 结语 引入 这篇我还继续上一篇的话题聊聊NHibernate二级缓存剩下的内容,比如你修改.删除数据时 ...

  6. 事后诸葛亮分析（Beta版本）

    全组讨论的照片 设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 解决代码分析.统计.管理等问题,定义的很清楚,有清晰的描述. 是否有充足的时间来做计划? ...

  7. Java学习4——java常用命令

    javac  file.java 编译Java文件,生成file.class(字节码) java  file   执行Java程序,不加后缀.class java  -version 查看Java版本 ...

  8. [转载]Eclipse自定义快捷键导出和导入方法

    背景: 以前做C/C++开发,习惯了Visual Studio这个强大的IDE,转到安卓开发后,用到蛋疼的Eclipse,实在不习惯,而且以前总觉得VS不流畅,现在才知道VS很好,才知道什么是真正的& ...

  9. java课程设计--猜数字（团队博客）

    java课程设计--猜数字(团队博客) 1.团队名称以及团队成员介绍 团队名称:cz 团队成员:陈伟泽,詹昌锦 团队照片: 2.项目git地址 http://git.oschina.net/Devil ...

  10. JDBC中的ResultSet无法多次循环的问题。

    前几天碰见了一个很奇葩的问题,使我百思不得其解,今天就写一下我遇见的问题吧,也供大家参考,别和我犯同样的毛病. 首先说下jdbc,jdbc是java是一种用于执行SQL语句的Java API,从jdb ...