欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery Ajax File Upload實(shí)例源碼

 更新時(shí)間：2016年12月12日 09:13:31   投稿：lijiao  
這篇文章主要為大家分享了jQuery Ajax File Upload實(shí)例源碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery Ajax File Upload實(shí)例源碼，供大家參考，具體內(nèi)容如下

項(xiàng)目結(jié)構(gòu)

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>

 服務(wù)端處理代碼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"); 
      } 
    } 
  } 
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • jQuery插件ajaxfileupload.js實(shí)現(xiàn)上傳文件

    jQuery插件ajaxfileupload.js實(shí)現(xiàn)上傳文件

    這篇文章主要為大家詳細(xì)介紹了jQuery插件ajaxfileupload.js實(shí)現(xiàn)上傳文件的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-05-05
  • jquery插件bxslider用法實(shí)例分析

    jquery插件bxslider用法實(shí)例分析

    這篇文章主要介紹了jquery插件bxslider用法,以實(shí)例形式較為詳細(xì)的分析了bxslider插件的使用步驟與相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-04-04
  • jquery實(shí)現(xiàn)搜索框功能實(shí)例詳解

    jquery實(shí)現(xiàn)搜索框功能實(shí)例詳解

    這篇文章主要介紹了jquery實(shí)現(xiàn)搜索框功能,搜索框?qū)崿F(xiàn)搜索一個(gè)ul列表中的指定關(guān)鍵詞的li。具體實(shí)現(xiàn)代碼大家參考下本文
    2018-07-07
  • 深入理解jQuery事件綁定

    深入理解jQuery事件綁定

    下面小編就為大家?guī)硪黄钊肜斫鈐Query事件綁定。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-06-06
  • jQuery Ajax頁面局部加載方法匯總

    jQuery Ajax頁面局部加載方法匯總

    jquery中實(shí)現(xiàn)ajax價(jià)值的方法有很多種，下面小編給大家介紹了jQuery Ajax頁面局部加載方法匯總，非常實(shí)用具有參考借鑒價(jià)值，感謝的朋友一起看下吧
    2016-06-06
  • 最簡單的jQuery程序 入門者學(xué)習(xí)

    最簡單的jQuery程序 入門者學(xué)習(xí)

    用jQuery寫的一個(gè)簡單的程序,用于入門練習(xí),發(fā)給大家,希望初學(xué)者有用.
    2009-07-07
  • jQuery UI Bootstrap是什么?

    jQuery UI Bootstrap是什么?

    jQuery UI Bootstrap是什么?jQuery UI Bootstrap是一個(gè)將jQuery UI集成到Bootstrap上的CSS框架,具體內(nèi)容請看下文
    2016-06-06
  • jQuery新的事件綁定機(jī)制on()示例應(yīng)用

    jQuery新的事件綁定機(jī)制on()示例應(yīng)用

    從jQuery1.7開始，jQuery引入了全新的事件綁定機(jī)制，on()和off()兩個(gè)函數(shù)統(tǒng)一處理事件綁定，下面通過示例為大家介紹下
    2014-07-07
  • Jquery中基本選擇器用法實(shí)例詳解

    Jquery中基本選擇器用法實(shí)例詳解

    這篇文章主要介紹了Jquery中基本選擇器用法,以實(shí)例形式較為詳細(xì)的分析了jQuery中常見選擇器的使用方法,并備有較為詳細(xì)的備注說明,需要的朋友可以參考下
    2015-05-05
  • 關(guān)于webuploader插件使用過程遇到的小問題

    關(guān)于webuploader插件使用過程遇到的小問題

    這篇文章主要為大家詳細(xì)解決了關(guān)于webuploader插件使用過程遇到的小問題,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-11-11

最新評論