网络编程
位置：首页>> 网络编程>> JavaScript>> jQuery Ajax File Upload实例源码

jQuery Ajax File Upload实例源码

作者：lijiao　　发布时间：2024-04-09 19:48:58　

标签：jQuery,Ajax,File,Upload

本文实例为大家分享了jQuery Ajax File Upload实例源码，供大家参考，具体内容如下

项目结构

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

效果图

jQuery Ajax File Upload实例源码 

客户端html代码


<％@ 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" mce_href="style.css" media="all" />
 <mce:script type="text/JavaScript" src="../Scripts/jQuery-1.4.1.min.js" mce_src="Scripts/jquery-1.4.1.min.js"></mce:script>
 <mce:script type="text/javascript" src="../Scripts/ajaxupload.3.5.js" mce_src="Scripts/ajaxupload.3.5.js"></mce:script>
 <mce: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 + '" mce_src="uploads/' + file + '" alt="" /><br />' + file).addClass('success');
         } else {
           $('<li></li>').appendTo('#files').text(file).addClass('error');
         }
       }
     });
   });

// --></mce:script>
</head>
<body>
 <form id="form1" runat="server">
 <div id="upload">
   Upload File
 </div>

<!-- Upload Button-->
 <div id="Div1" >Upload File</div><span id="status" ></span>
 <!--List Files-->
 <ul id="files" ></ul>

</form>
</body>
</html>

 服务端处理代码Upload.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");
     }
   }
 }
}

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com