当前位置:主页 > jquery教程 > jQuery Ajax File Upload实例源码

jQuery Ajax File Upload使用实例解析

发布:2020-01-19 10:37:19 103


为网友们分享了jQuery相关的编程文章,网友熊惠芳根据主题投稿了本篇教程内容,涉及到jQuery、Ajax、File、Upload、jQuery Ajax File Upload实例源码相关内容,已被139网友关注,下面的电子资料对本篇知识点有更加详尽的解释。

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

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


参考资料

相关文章

  • 详细介绍jQuery动态移除与增加onclick属性操作方法

    发布:2020-03-09

    这篇文章主要介绍了jQuery动态移除与增加onclick属性的方法,结合实例形式分析了jQuery使用attr与removeAttr方法针对元素属性动态操作相关实现技巧,需要的朋友可以参考下


  • jQuery复合事件的使用

    发布:2020-02-12

    这篇文章主要介绍了jQuery复合事件用法,结合具体实例形式分析了jQuery复合事件的简单定义与使用方法,需要的朋友可以参考下


  • jquery如何实现经典的淡入淡出选项卡效果

    发布:2020-02-01

    这篇文章主要介绍了jquery实现经典的淡入淡出选项卡效果代码,通过简单的jQuery鼠标事件及链式操作实现淡入淡出效果,非常简单实用,需要的朋友可以参考下


  • python tarfile压缩包操作保姆级教程

    发布:2023-04-12

    TarFile类就是tar压缩包,其由member块组成, member块则包括header块和data块. 每个member以TarInfo对象形式描述. 所以TarFile就是TarInfo的序列


  • jQuery Validate设置onkeyup验证的实例代码

    发布:2022-12-07

    给网友朋友们带来一篇关于jQuery的教程,jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。这篇文章主要介绍了jQuery Validate设置onkeyup验证的相关资料


  • JS设置表格奇偶行设置不同颜色的实例代码

    发布:2021-05-28

    表格奇偶行设置不同颜色,在某些情况下还是比较实用的,下面有个不错的示例,大家可以参考下,希望对大家有所帮助


  • Java中File文件操作类的超详细使用教程

    发布:2023-04-25

    File类在包java.io.File下、代表操作系统的文件对象(文件、文件夹),File类提供了诸如:定位文件,获取文件本身的信息、删除文件、创建文件(文件夹)等功能,下面这篇文章主要给大家介绍了关于Java中File文件操作类的超详细使用教程,需要的朋友可以参考下


  • jQuery中table数据的值拷贝和拆分知识点总结

    发布:2020-02-13

    在开发的过程中,经常会遇到弹出框显示前一页table列表的情况,这时候会有好多方法来来解决。下面小编给大家介绍怎么用jquery将值拷贝到第二页并拆分拷贝的值,需要的朋友参考下


网友讨论