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

我信心满满的写下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. 六,ESP8266 TCP Client

    今天不知道是不是让我姐挺失望.......很多时候都不知道自己努力的方向对不对,,以后能不能带给家人最美好的期盼...... Init.lua 没啥改变,,就改了一下加载Client.lua gpio ...

  2. SwaggerUI笔记

    关于 Swagger Swagger能成为最受欢迎的REST APIs文档生成工具之一,有以下几个原因: Swagger 可以生成一个具有互动性的API控制台,开发者可以用来快速学习和尝试API. S ...

  3. python--对于装饰器的理解

    1.首先,有个原来写好的函数,完成一定的功能,比如下面的,就打印一句话(某程序被调用).简单点,容易帮我们想清楚程序是怎么执行的. ''' 原函数 ''' def fun1(): print(&quo ...

  4. 201521123091 《Java程序设计》第3周学习总结

    Java 第三周总结 第三周的作业. Java 第三周总结 1.本章学习总结 2.Java Q&A 1.代码阅读 2.构造函数有什么用?其编写格式是什么?如果一个类不写构造函数,它有构造函数吗 ...

  5. 201521123099 《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  6. Servlet知识点大纲

    这是我整理的Servlet知识点大纲,可按照它的顺序来学习-..具体的内容在我的博客中都可以找到!

  7. Struts2第十篇【数据校验、代码方式、XML配置方式、错误信息返回样式】

    回顾以前的数据校验 使用一个FormBean对象来封装着web端来过来的数据 维护一个Map集合保存着错误信息-对各个字段进行逻辑判断 //表单提交过来的数据全都是String类型的,birthday ...

  8. java进程/线程;堆和栈；多线程

    一.进程和线程 进程:在内存中运行的应用程序,一个exe是一个进程. 如:ps -exf  可以查看各个应用的进程,其中ppid为父进程: ps aux | egrep '(cron|syslog)' ...

  9. geotrellis使用（三十三）关于Geotrellis读取Geotiff的两个细节

    前言 在上两篇文章中我介绍了如何直接将Geotiff(一个或者多个)发布为TMS服务.这中间其实我遇到了一个问题,并且这个问题伴随Geotrellis的几乎所有使用案例,下面我进行详细讲述. 一.问题 ...

  10. Spring MVC知识点整理

    网上Spring MVC相关知识点的介绍已经有很多了,但是大部分文章都是介绍其中的一部分知识点. 本文希望能够向读者做一个基本整体的介绍,首先我们先来了解下Spring MVC的基础接口和组件.   ...