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

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

赞 (0)

相关推荐

  • Jquery通过ajax请求NodeJS返回json数据实例

    最近看了NodeJS相关的,在网上查了下结合AJAX的应用,感觉应用前景还是不错的.为什么用这个组合呢? 1.NodeJS不需要安装,拷贝过去就可以使用,而环境变量可以只配置在当前cmd窗口,运行方便. 2.通过HTML的ajax请求,可以实现在不同的服务器上,可跨域获取数据. 3.通信数据格式灵活,可以是xml.json.binary等,数据适合任何平台. 在说说我的环境,我使用的是公司提供的电脑,有很多限制,比如是域中电脑,操作权限低,无法安装任何软件,无法修改计算机配置,无法使用U盘等等.

  • jQuery中$.ajax()方法参数解析

    本文实例为大家讲解了jQuery $.ajax()方法参数,供大家参考,具体内容如下 $.ajax({ url:'test.do', data:{id:123,name:'xiaoming'}, type:'post', dataType:'json', success:function(data){ alert(data);//弹窗 //TODO ........ }, error:function(data){ alert(data);//弹窗 //TODO ........ } }) ur

  • jquery ajax后台返回list,前台用jquery遍历list的实现

    如下所示: $.ajax({ type: 'post', url: "maintain_findRoomByBuildingId.shtml", cache: false, data: {"buildingId":buildingId}, dataType: 'json', success: function(data){ jQuery.each(data.roomList, function(i,item){ alert(item.id+","

  • jQuery Ajax请求后台数据并在前台接收

    1.前台使用jQuery ajax请求 $.ajax({ url: "r_getRolePer.action", dataType:'json', data: {userId:"1"}, //请求的附加参数,用json对象 method:'POST', success: function(data){ $.messager.alert('消息',data.add,''); //这里使用的时easyui的格式 }, }); 2.在action里面使用response.

  • AJAX和jQuery动态加载数据的实现方法

    AJAX和jQuery动态加载数据的实现方法

    什么是AJAX? 这里的AJAX不是希腊神话里的英雄,也不是清洁剂品牌,更不是一门语言,而是指异步Javascript和XML(Asynchronous JavaScript And XML),这里的XML(数据格式)也可以是纯文本(Plain Text)或是JSON.简单的说,就是使用XMLHttpRequest对象和服务器端交换数据(以XML或是JSON等格式),使用JavaScript处理数据并更新页面内容. 为什么要使用AJAX? 借助AJAX,我们可以实现: 在不重载页面的情况下,向服

  • javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】

    本文实例讲述了javascript和 jQuery中的AJAX技术.分享给大家供大家参考,具体如下: 1.什么是AJAX? AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面.

  • jQuery中ajax的4种常用请求方式介绍

    AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下. 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml"). 实例: 保存数据到服务器,成功时显示信息. $.aj

  • 概述jQuery中的ajax方法

    概述jQuery中的ajax方法

    1.原生ajax get请求和post请求区别:黄色小三角 以get请求为例,输出结果如下: 2.jquery中的ajax 列了常用的6个方法: 3.状态说明 readystate: 0:请求未初始化,open未调用 1:服务器连接已建立,open已经调用了 2:请求已接受,也就是接收到头信息了 3:请求处理中,也就是接收到响应主体了 4:请求已完成,且响应已就绪,也就是响应完成了 http状态码: 200:OK   一切正常,对GET和POST请求的应答文档跟在后面 301:Moved Per

  • 用jQuery的AJax实现异步访问、异步加载

    用jQuery的AJax实现异步访问、异步加载

    本篇文章实现了用jQuery的AJax实现异步访问和异步加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下. [异步访问] 用一个例子用以说明:点击按钮,将input内用户输入的数据发送给服务端,并将结果返回给页面. 首先是html承载内容: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>AJax异步访问<

  • PHP+jquery+ajax实现分页

    本文实例为大家分享了jquery ajax实现分页的具体代码,供大家参考,具体内容如下 HTML <div id="list"> <ul></ul> </div> <div id="pagecount"></div> CSS #list{width:680px; height:530px; margin:2px auto; position:relative} #list ul li{float

随机推荐