ASP.NET Jquery+ajax上傳文件(帶進度條)

本文轉載自查看原文 2013-09-13 10:58 7888 ASP.NET JQUERY ajax上傳無刷新上傳/ ASP.NET

效果圖

支持ie6+,chrome,ie6中文文件名會顯示亂碼.

上傳時候會顯示進度條.

需要jquery.uploadify.js插件,稍后會給出下載

前台代碼

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">

    <script src="fileupload/jquery-1.4.4.min.js" type="text/javascript" language="javascript"></script>

<!-- 腳本部分提示修改為中文 -->
    <script src="fileupload/jquery.uploadify.js" type="text/javascript" language="javascript"></script>

    <link href="fileupload/uploadify.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" language="javascript">
    $(function() {
        $("#file_upload").uploadify({
            'auto': false,                      //是否自動上傳
            'swf': 'fileupload/uploadify.swf',      //上傳swf控件,不可更改
            'uploader': 'Handler.ashx',            //上傳處理頁面,可以aspx
            'fileTypeDesc':'pdf文件或者圖像',
            'fileTypeExts':'*.pdf;*.jpg;*.jpeg;*.gif;*.png',   //文件類型限制,默認不受限制
            'buttonText':'瀏覽文件',//按鈕文字
            'width'     :100,
            'height'    :26,
            //最大文件數量'uploadLimit':
            'multi'     :false,//單選            
            'fileSizeLimit':'20MB',
            'queueSizeLimit':1,  //隊列限制
            'removeCompleted' : false
        });
    });
    </script>

    <title>Jquery文件上傳</title>
</head>
<body>
    <form id="form1" runat="server">
        <input type="file" name="file_upload" id="file_upload" />
        <a href="javascript:$('#file_upload').uploadify('cancel')" >刪除</a><!-- 刪除文件實際操作通過ajax提交. -->
        <a href="javascript:$('#file_upload').uploadify('upload','*')">Upload Files</a>
      
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        api參考:&nbsp;http://www.uploadify.com/documentation/
    </form>
</body>
</html>

后台無,

處理ashx頁面代碼:

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;

public class Handler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        if (context.Request.Files.Count > 0)
        {
            //HttpContext.Current.Request.FilePath;
            string strPath = System.Web.HttpContext.Current.Server.MapPath("~/upload/");
            string strName = context.Request.Files[0].FileName;
            context.Request.Files[0].SaveAs(System.IO.Path.Combine(strPath, strName));
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

下載地址

http://download.csdn.net/detail/wukaiping870123/6259419

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 springMVC+ajax 文件上傳帶進度條多文件異步上傳帶進度條 Jquery.form.js實現表單異步提交以及文件上傳（帶進度條）贊！帶進度條的 jQuery 文件拖放上傳插件 HTML5 jQuery+FormData 異步上傳文件，帶進度條 MVC3+Html5+jquery_easyui做上傳文件,帶進度條 jQuery.ajax文件上傳進度條 Spring Boot上傳文件（帶進度條）【Web】前端文件上傳，帶進度條 php實現上傳文件時帶進度條