Jquery_异步上传文件多种方式归纳

1.不用任何插件，利用iframe，将form的taget设为iframe的name，注意设为iframe的id是没用的，跟网上很多说的不太一致

iframe_upload.htm

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

</head>

<body>

    <form id="form1" method="post" action="Upload.aspx" enctype="multipart/form-data" target="uploadframe">

        <input type="file" id="upload" name="upload" />

        <input type="submit" value="Upload" />

    </form>

    <iframe id="uploadframe" name="uploadframe" style="visibility:hidden"></iframe>

</body>

</html>

Upload.aspx

<%@ Page Language="C#" %>

<%

    Response.ClearContent();

    try

    {

        if (Request.Files.Count == 0) Response.Write("Error");

        else

        {

            HttpPostedFile file= Request.Files[0];

            string ext = System.IO.Path.GetExtension(file.FileName);

            string folder = HttpContext.Current.Server.MapPath("~\\Upload\\");

            string path = folder + Guid.NewGuid().ToString() + ext;

            file.SaveAs(path);

            Response.Write("Success");

        }

    }

    catch

    {

        Response.Write("Error");

    }

%>

2.利用ajaxupload.js

Default.aspx

<!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>

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

        <title>Ajax Upload Demo</title>

        <script type="text/javascript" src="Scirpt/jquery-1.10.2.min.js"></script>

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

        <script type="text/javascript">

            $(function ()

            {

                // 创建一个上传参数

                var uploadOption =

                {

                    // 提交目标

                    action: "Upload.aspx",

                    // 自动提交

                    autoSubmit: false,

                    // 选择文件之后…

                    onChange: function (file, extension) {

                        if (new RegExp(/(jpg)|(jpeg)|(bmp)|(gif)|(png)/i).test(extension)) {

                            $("#filepath").val(file);

                        } else {

                            alert("只限上传图片文件，请重新选择！");

                        }

                    },

                    // 开始上传文件

                    onSubmit: function (file, extension) {

                        $("#state").val("正在上传" + file + "..");

                    },

                    // 上传完成之后

                    onComplete: function (file, response) {

                        if (response == "Success") $("#state").val("上传完成！");

                        else $("#state").val(response);

                    }

                }

                // 初始化图片上传框

                var oAjaxUpload = new AjaxUpload('#selector', uploadOption);

                // 给上传按钮增加上传动作

                $("#up").click(function ()

                {

                    oAjaxUpload.submit();

                });

            });

        </script>

    </head>

    <body>

        <div>

            <label>一个普通的按钮：</label><input type="button" value="选取图片" id="selector" />

            <br />

            <label>选择的图片路径：</label><input type="text" readonly="readonly" value="" id="filepath" />

            <br />

            <label>不是submit按钮：</label><input type="button" value="上传" id="up" />

            <br />

            <label>上传状态和结果：</label><input type="text" readonly="readonly" value="" id="state" />

        </div>

    </body>

</html>

Upload.aspx

<%@ Page Language="C#" %>

<%

    Response.ClearContent();

    try

    {

        if (Request.Files.Count == 0) Response.Write("Error");

        else

        {

            HttpPostedFile file= Request.Files[0];

            string ext = System.IO.Path.GetExtension(file.FileName);

            string folder = HttpContext.Current.Server.MapPath("~\\Upload\\");

            string path = folder + Guid.NewGuid().ToString() + ext;

            file.SaveAs(path);

            Response.Write("Success");

        }

    }

    catch

    {

        Response.Write("Error");

    }

%>

3.利用ajaxfileupload.html

ajaxfileupload.html

<html>

<head>

    <title>Ajax File Uploader Plugin For Jquery</title>

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

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

    <script type="text/javascript">

        function ajaxFileUpload() {

            $("#loading")

        .ajaxStart(function () {

            $(this).show();

        })

        .ajaxComplete(function () {

            $(this).hide();

        });

            $.ajaxFileUpload

            (

                {

                    url: 'Upload3.aspx',

                    secureuri: false,

                    fileElementId: 'fileToUpload',

                    dataType: 'json',

                    data: { name: 'logan', id: 'id' },

                    success: function (data, status) {

                        if (typeof (data.error) != 'undefined') {

                            if (data.error != '') {

                                alert(data.error);

                                //alert(data.error.toJSONString());

                            } else {

                                alert(data.msg);

                                //alert(data.toJSONString());

                            }

                        }

                    },

                    error: function (data, status, e) {

                        //alert(e.toJSONString());

                        alert(e);

                    }

                }

            )

            return false;

        }

    </script>

</head>

<body>

    <div id="wrapper">

        <div id="content">

            <h1>

                Ajax File Upload Demo</h1>

            <img id="loading" src="loading.gif" style="display: none;">

            <form name="form" action="" method="post" enctype="multipart/form-data">

            <table cellpadding="0" cellspacing="0" class="tableForm">

                <thead>

                    <tr>

                        <th>

                            Please select a file and click Upload button

                        </th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td>

                            <input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input" />

                        </td>

                    </tr>

                </tbody>

                <tfoot>

                    <tr>

                        <td>

                            <button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">

                                Upload</button>

                        </td>

                    </tr>

                </tfoot>

            </table>

            </form>

        </div>

</body>

</html>

Default.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace Upload

{

    public partial class Upload3 : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            HttpFileCollection files = HttpContext.Current.Request.Files;

            if (null == files || files.Count == 0)

            {

                //DoNothing

            }

            else

            {

                string msg = null;

                msg = UploadMain();

                //Response.ContentType = "application/json";

                Response.Write(msg);

                Response.End();

            }

        }

        private string UploadMain()

        {

            HttpPostedFile file = Request.Files[0];

            string ext = System.IO.Path.GetExtension(file.FileName);

            string folder = HttpContext.Current.Server.MapPath("~\\Upload\\");

            string fileName = Guid.NewGuid().ToString() + ext;

            string path = folder + fileName;

            file.SaveAs(path);

            string message = getMsg("0047 File Upload Success!", null);

            return message;

        }

        private string getMsg(string msg, string err)

        {

            if (String.IsNullOrEmpty(msg))

            {

                msg = "";

            }

            if (String.IsNullOrEmpty(err))

            {

                err = "";

            }

            string message = "{";

            message += "msg:'#msg#',";

            message += "error:'#err#'";

            message += "}";

            return message.Replace("#msg#", msg).Replace("#err#", err);

        }

    }

}

4.html5+html5uploader.js

html5uploder.htm

<!DOCTYPE html>

<html>

<script src="Scirpt/jquery-1.10.2.min.js" type="text/javascript"></script>

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

<script type="text/javascript">

    $(function () {

        $("#multiple").html5Uploader({

            postUrl: "Upload2.aspx",

            onSuccess: function (a, b, c) {

                var img = $('<img/>').attr('src', "http://localhost:83/Upload/"+c).css('width', '140px').css('height', '140px').css('margin', '10px');

                $('#content').append(img);

            }

        });

    });

</script>

<head>

    <title></title>

</head>

<body>

    <input id="multiple" type="file" accept="image/*"  multiple />

    <div id="content"></div>

</body>

</html>

Default2.aspx

<%@ Page Language="C#" %>

<%

    Response.ClearContent();

    try

    {

        if (Request.Files.Count == 0) Response.Write("Error");

        else

        {

            HttpPostedFile file= Request.Files[0];

            string ext = System.IO.Path.GetExtension(file.FileName);

            string folder = HttpContext.Current.Server.MapPath("~\\Upload\\");

            string fileName = Guid.NewGuid().ToString()+ext;

            string path = folder + fileName;

            file.SaveAs(path);

            Response.Write(fileName);

        }

    }

    catch

    {

        Response.Write("Error");

    }

%>

Jquery_异步上传文件多种方式归纳的更多相关文章

Asp.Net Mvc异步上传文件的方式
今天试了下mvc自带的ajax,发现上传文件时后端action接收不到文件, Request.Files和HttpPostedFileBase都接收不到.....后来搜索了下才知道mvc自带的Ajax ...
ajax异步上传文件FormDate方式，html支持才可使用
今天需要做一个头像的预览功能,所以我想到了异步上传文件. 总结几点: 异步上传难点: 文件二进制流如何获取是否需要设置表单的头,就是content-Type那里.异步,所以无所谓了吧. 其他就差不多 ...
前端之web上传文件的方式
前端之web上传文件的方式本节内容 web上传文件方式介绍 form上传文件原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构造请求上传文件 1. web上传 ...
【转】JQuery插件ajaxFileUpload 异步上传文件（PHP版）
前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
利用jquery.form实现异步上传文件
实现原理目前需要在一个页面实现多个地方调用上传控件上传文件,并且必须是异步上传.思考半天,想到通过创建动态表单包裹上传文件域,利用jquery.form实现异步提交表单,从而达到异步上传的目的,在上 ...
第九篇：web之前端之web上传文件的方式
前端之web上传文件的方式前端之web上传文件的方式本节内容 web上传文件方式介绍 form上传文件原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构 ...
spingMVC异步上传文件
框架是个强大的东西,一般你能想到的,框架都会帮你做了,然后只需要会用就行了,spingmvc中有处理异步请求的机制,而且跟一般处理请求的方法差别不大,只是多了一个注解:spingmvc也可以将stri ...
JQuery插件ajaxFileUpload 异步上传文件（PHP版）
太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...
jquery ajaxFileUpload异步上传文件
ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http:/ ...

随机推荐

new trip
离开YY已经快一周了,特别感谢以前的老大姚冬和朱云峰,从他俩身上学到了很多.这个决定也经过了很长的纠结,不想再做个犹豫不决的人,所以最后还是坚定了最初的信念,也算是对半年前自己的一个完好交代,以防将来 ...
在虚拟机中安装windows
前言: 本来在windows当中安装windows是一件很简单的事,但是在使用光盘进行安装的时候,发现无法进行安装. 思路: 将光盘进行提取成iso文件,一个光盘提取一个iso文件,从而存在两个iso ...
Codeforces Round #361 (Div. 2)
A 脑筋急转弯 // #pragma comment(linker, "/STACK:1024000000,1024000000") #include <iostream&g ...
最长公共子序列LCS
LCS:给出两个序列S1和S2,求出的这两个序列的最大公共部分S3就是就是S1和S2的最长公共子序列了.公共部分必须是以相同的顺序出现,但是不必要是连续的. LCS具有最优子结构,且满足重叠子问题的 ...
struts2+Hibernate4+spring3+EasyUI环境搭建之五:引入jquery easyui
1.下载jquery easyui组件 http://www.jeasyui.com/download/index.php 2.解压放到工程中如图 3.jsp引入组件:必须按照如下顺序 ...
(转载)JDOM/XPATH编程指南
JDOM/XPATH编程指南本文分别介绍了 JDOM 和 XPATH,以及结合两者进行 XML 编程带来的好处. 前言 XML是一种优秀的数据打包和数据交换的形式,在当今XML大行于天下,如果没有听 ...
单片机C语言下LCD多级菜单的一种实现方法
摘要: 介绍了在C 语言环境下,在LCD 液晶显示屏上实现多级嵌套菜单的一种简便方法,提出了一个结构紧凑.实用的程序模型. 关键词: 液晶显示屏; 多级菜单; 单片机; C 语言; LCD 中 ...
python中列表，元组，字符串如何互相转换
python中有三个内建函数:列表,元组和字符串,他们之间的互相转换使用三个函数,str(),tuple()和list(),具体示例如下所示: >>> s = "xxxxx ...
Linux的运行级别和chkconfig用法
Linux的运行级别和chkconfig用法一.Linux的运行级别在装MySQL的时候,才知道了Linux的运行级别这么一回事.汗…自己太水了…下面总结一下: 什么是运行级别呢?简 ...
Spring的ControllerAdvice注解
@ControllerAdvice,是spring3.2提供的新注解,其实现如下所示: @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUN ...

Jquery_异步上传文件多种方式归纳

Jquery_异步上传文件多种方式归纳的更多相关文章

随机推荐

热门专题