jQuery Ajax File Upload实例源码


Posted in Javascript onDecember 12, 2016

本文实例为大家分享了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"); 
      } 
    } 
  } 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery选择头像并实时显示的代码
Jun 27 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 #Javascript
layer实现弹窗提交信息
Dec 12 #Javascript
详解Javascript数据类型的转换规则
Dec 12 #Javascript
设置jquery UI 控件的大小方法
Dec 12 #Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 #Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 #Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 #Javascript
You might like
针对初学PHP者的疑难问答(2)
2006/10/09 PHP
探讨php中header的用法详解
2013/06/07 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
Array.prototype 的泛型应用分析
2010/04/30 Javascript
JavaScript去掉空格的方法集合
2010/12/28 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
javascript每日必学之多态
2016/02/23 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
浅谈python numpy中nonzero()的用法
2018/04/02 Python
利用python修改json文件的value方法
2018/12/31 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
党员廉洁自律承诺书
2014/05/26 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
python单向链表实例详解
2022/05/25 Python