jQuery Ajax File Upload实例源码

更新时间：2016年12月12日 09:13:31 投稿：lijiao

这篇文章主要为大家分享了jQuery Ajax File Upload实例源码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

项目结构

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

效果图

客户端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"); 
      } 
    } 
  } 
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

jQuery插件ajaxfileupload.js实现上传文件
这篇文章主要为大家详细介绍了jQuery插件ajaxfileupload.js实现上传文件的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-05-05
jquery插件bxslider用法实例分析
这篇文章主要介绍了jquery插件bxslider用法,以实例形式较为详细的分析了bxslider插件的使用步骤与相关技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
jquery实现搜索框功能实例详解
这篇文章主要介绍了jquery实现搜索框功能,搜索框实现搜索一个ul列表中的指定关键词的li。具体实现代码大家参考下本文
2018-07-07
深入理解jQuery事件绑定
下面小编就为大家带来一篇深入理解jQuery事件绑定。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
jQuery Ajax页面局部加载方法汇总
jquery中实现ajax价值的方法有很多种，下面小编给大家介绍了jQuery Ajax页面局部加载方法汇总，非常实用具有参考借鉴价值，感谢的朋友一起看下吧
2016-06-06
最简单的jQuery程序入门者学习
用jQuery写的一个简单的程序,用于入门练习,发给大家,希望初学者有用.
2009-07-07
jQuery UI Bootstrap是什么?
jQuery UI Bootstrap是什么?jQuery UI Bootstrap是一个将jQuery UI集成到Bootstrap上的CSS框架,具体内容请看下文
2016-06-06
jQuery新的事件绑定机制on()示例应用
从jQuery1.7开始，jQuery引入了全新的事件绑定机制，on()和off()两个函数统一处理事件绑定，下面通过示例为大家介绍下
2014-07-07
Jquery中基本选择器用法实例详解
这篇文章主要介绍了Jquery中基本选择器用法,以实例形式较为详细的分析了jQuery中常见选择器的使用方法,并备有较为详细的备注说明,需要的朋友可以参考下
2015-05-05
关于webuploader插件使用过程遇到的小问题
这篇文章主要为大家详细解决了关于webuploader插件使用过程遇到的小问题,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11