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

我信心满满的写下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. hibernate 教程（3）—NHibernate查询语言HQL

    NHibernate之旅(3):探索查询之NHibernate查询语言(HQL) 本节内容 NHibernate中的查询方法 NHibernate查询语言(HQL) 1.from子句 2.select ...

  2. css入门基础知识

    一.CSS常用选择器 /*CSS注释*/ /*CSS修改页面中的所有标签必须借助选择器选中. 选择器中可以写多对CSS属性:每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔 选择器{ 属性1 ...

  3. 微信小程序scroll标签的测试

    一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title&quo ...

  4. 第一次作业-----四则运算题目生成（基于java）

    1.题目要求 1.除了整数以外,还要支持真分数的四则运算,真分数的运算,例如:1/6 + 1/8 = 7/24. 2.运算符为 +, −, ×, ÷. 3.并且要求能处理用户的输入,并判断对错,打分统 ...

  5. 201521123114 《Java程序设计》第4周学习总结

    1. 本章学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 学会了设计一个类时,尽量用private修饰属性,public修饰方法:类名的首字母要大写. ...

  6. 201521123032 《Java程序设计》第3周学习总结

    1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 2. 书面作 ...

  7. 201521123006 《Java程序设计》 第2周学习总结

    1. 本周学习总结 本周进一步学习了java,了解了java编程中一些特定的用法,比如:在编译程序时可以使用import来减少输入包名称.本周还学会了使用枚举类(enum Choice{fab,sor ...

  8. 学号：201521123116 《java程序设计》第九周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...

  9. 201521123101 《Java程序设计》第13周学习总结

    1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 1.2 te ...

  10. Python的自学之路：Python基础（一）

    声明:我写博客不是为了什么,只是为了记录自己的学习状态,学过的知识点!方便以后进行好的复习!python小白,勿喷 python环境的搭建,在这里就不细说了,这里有我的链接,可以参考一下:https: ...