jQuery Ajax File Upload(附源碼)

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

項目結構

Default.aspx
Upload.aspx
Scripts/…
style.css

用戶端html代碼

隱藏行號複製代碼？ Default.aspx

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="UploadFile.aspx.vb" Inherits="Web.UploadFile" %>

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

    <link rel="Stylesheet" type="text/css" href="style.css" media="all" />

    <script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>

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

```
    <script type="text/javascript">
```
```
        $(function () {
```

            var btnUpload = $('#upload');

```
            var status = $('#status');
```
```
            new AjaxUpload(btnUpload, {
```
```
                action: 'Upload.aspx',
```

                //Name of the file input box

```
                name: 'uploadfile',
```

                onSubmit: function (file, ext) {

                    if (!(ext && /^(jpg|png|jpeg|gif)$/.test(ext))) {

                        // check for valid file extension

                        status.text('Only JPG, PNG or GIF files are allowed');

```
                        return false;
```
```
                    }
```

                    status.text('Uploading...');

```
                },
```

                onComplete: function (file, response) {

                    //On completion clear the status

```
                    status.text('');
```

                    //Add uploaded file to list

                    if (response === "success") {

                        $('<li></li>').appendTo('#files').html('<img src="./uploads/' + file + '" alt="" /><br />' + file).addClass('success');

```
                    } else {
```

                        $('<li></li>').appendTo('#files').text(file).addClass('error');

```
                    }
```
```
                }
```
```
            });
```
```
        });
```
```
    </script>
```
```
</head>
```
```
<body>
```
```
    <form id="form1" runat="server">
```
```
    <div id="upload">
```
```
        Upload File
```
```
    </div>
```
```
    
```

    <div id="Div1" >Upload File</div><span id="status" ></span>

```
    
```
```
    <ul id="files" ></ul>
```
```
    </form>
```
```
</body>
```
```
</html>
```

服務端處理代碼Upload.aspx

隱藏行號複製代碼？ Default.aspx

```
using System;
```
```
using System.Collections.Generic;
```
```
using System.Linq;
```
```
using System.Web;
```
```
using System.Web.UI;
```
```
using System.Web.UI.WebControls;
```
```
namespace JqueryAjaxUploadTest
```
```
{
```

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

```
    {
```

        protected void Page_Load(object sender, EventArgs e)

```
        {
```
```
            try
```
```
            {
```

                HttpPostedFile hpfFile = Request.Files["uploadfile"];

                hpfFile.SaveAs(Server.MapPath("~/uploads/") + hpfFile.FileName);

                Response.Write("success");

```
            }
```
```
            catch (Exception)
```
```
            {
```
```
                Response.Write("fail");
```
```
            }
```
```
        }
```
```
    }
```
```
}
```

：http://pjw100.download.csdn.net/
找到檔案 jquery ajax file upload(剛剛上傳，檔案可能還沒刷出來)

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More