jQuery Ajax File Upload(附源码)

最新推荐文章于 2022-11-25 14:25:35 发布

my98800

最新推荐文章于 2022-11-25 14:25:35 发布

阅读量473

点赞数

分类专栏： jQuery

jQuery 专栏收录该内容

171 篇文章 0 订阅

订阅专栏

项目结构

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

效果图

客户端html代码

[xhtml] view plain copy 
   
 <%@ 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

[c-sharp]view plaincopy 
   
 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");  
             }  
         }  
     }  
 }  

my98800

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery Ajax File Upload(附源码)

项目结构Default.aspxUpload.aspxScripts/…style.css效果图客户端html代码[xhtml] view plain copy%@ Page Language="vb" AutoEventWireup="false" CodeBehind=
复制链接

扫一扫

专栏目录