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

我信心满满的写下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. ServletResponse的一些知识点

    ServletResponse* 服务器对浏览器做出的响应,将需要发送给浏览器的所有数据全部存放在此对象上.* 发送数据,使用流操作,将所需要的数据,存放在指定的流中,数据将显示到浏览器中* 字符流 ...

  2. 九度OJ 1013 开门人和关门人

    #include <iostream> #include <string.h> #include <sstream> #include <math.h> ...

  3. SNS团队第二次站立会议（2017.04.23）

    一.当天站立式会议照片 本次会议主要内容:汇报工作进度,根据完成情况调整进度 二.每个人的工作 成员 今天已完成的工作 明天计划完成的工作 罗于婕 梳理清楚数据的每个类型和数据项  具体落实把相关数据 ...

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

    Java 第一周总结 第一周的作业. 1.本章学习总结 [x] 初识Java语言:Java的历史,三大平台,了解JVM/JRE/JDK [x] Java开发环境的配置 [x] 用记事本编写Java程序 ...

  5. 201521123103 《java学习笔记》 第十二周学习总结

    一.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 二.书面作业 将Student对象(属性:int id, String name,int age,double ...

  6. jQuery 简介，与js的对比

    jquery可以说是js的封装,大多数情况下jquery比js简单,它们两个可以相互写对方的里面,使用jquery需要导入jquery文件. <script src="jquery-1 ...

  7. PowerShell脚本—停止占用8080端口的进程

    $str = netstat -ano $list = $str.Split('\n') ; $i -lt $list.Length; $i++) { $item_list = [System.Tex ...

  8. webservice05#soap消息

    1, SOAPMessage结构图 2, SOAP消息的创建 1>前面的一个简单WebService  服务 package com.yangw.soap.service; import jav ...

  9. Activiti常见问题解决

    1,工作流activiti eclipse 插件不自动生成png window ——> preferences——>activiti——>save——>选中create pro ...

  10. 【】小技巧】CSS文字两端对齐

    需求如下,红框所在的文字有四个字的.三个字的.两个字的,如果不两端对齐可以选择居中对齐,或者右对齐.但是如果要像下面这样两端对齐呢? 我相信以前很多人都这么干过:两个字中间使用 来隔开达到四个字的宽度 ...