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

我信心满满的写下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. SEO搜索引擎优化（一）

    什么是SEO呢 英文为"Search Engine Optimization",中文名为"搜索引擎优化".SEO是指通过对网站进行站内优化和修复(网站Web结构 ...

  2. 关于C++中计时的方法

    在C++的库函数中,我们可以使用clock()来计算程序的运行时间,主要使用一下三个函数类型及函数: 1.clock_t:数据类型,其实,当你打开time.h就知道了,就是个long型,用来记录一段时 ...

  3. 【Socket编程】Java中网络相关API的应用

    Java中网络相关API的应用 一.InetAddress类 InetAddress类用于标识网络上的硬件资源,表示互联网协议(IP)地址. InetAddress类没有构造方法,所以不能直接new出 ...

  4. 第二次作业：结对编程，四则运算的GUI实现

    小伙伴:201421123031 余洋 201421123044  潘志坚  题目要求: 我们在个人作业1中,用各种语言实现了一个命令行的四则运算小程序.进一步,本次要求把这个程序做成GUI(可以是W ...

  5. 201521123006 《java程序设计》 第13周学习总结

    1. 本周学习总结 1.以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.j ...

  6. 201521123075 《Java程序设计》第14周学习总结

    1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) 参 ...

  7. 201521123096《Java程序设计》第十三周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  8. 在控制台显示“Hello World”

    //作者:江骆 //功能:在控制台显示"Hello World" //日期:2017.7.19 public class helloworld   //public 表示公共类,一 ...

  9. 银河麒麟操作系统打开VMware报vmmon无法编译

    使用银河麒麟操作系统打开VMware可能会报vmmon无法编译 这个时候... 将/usr/src/linux-headers-xxx/include/miscdevice.h第71行void改为in ...

  10. Mybatis映射文件处理特殊字符【转发】

    该博文下的方法就非常好了! http://blog.csdn.net/zheng0518/article/details/10449549