jQuery插件AjaxFileUpload实现ajax文件上传

本文实例为我们分享了AjaxFileUpload完成公文上传的现实代码,供大家参谋,具体内容如下

jQuery插件AjaxFileUpload能够完成ajax文件上传

jQuery插件AjaxFileUpload完结ajax文件上传,jqueryajax上传插件

本文实例为大家享用了AjaxFileUpload实现公文上传的求实代码,供我们参照他事他说加以考察,具体内容如下

jQuery插件AjaxFileUpload用来达成ajax文件上传,该插件使用特别轻巧,接下去写个demo演示怎么用AjaxFileUpload插件完结公文上传。

1、引进AjaxFileUpload插件相关的js

复制代码 代码如下:<script
type=”text/javascript”
src=”<%=basePath%>resources/js/jquery-1.2.1.js”></script>
<script type=”text/javascript”
src=”<%=basePath%>resources/js/ajaxfileupload.js”></script>
备考:测验发掘,ajaxfileupload对jQuery版本是有供给的,在应用中ajaxfileupload和jQuery对应的js版本要平等,不然会形成非凡发生,可以从ajaxfileupload官方网址下载,幸免版本争辩。

2、达成上传效用代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/base.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>">

  <title>ajax文件上传</title>

  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <meta http-equiv="expires" content="0">  
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <link rel="stylesheet" type="text/css" href="validate/ajaxfileupload.css" />
  <script type="text/javascript" src="validate/jquery-1.6.2.min.js"></script>
  <script type="text/javascript" src="validate/ajaxfileupload.js" ></script>
  <script type="text/javascript">
  $(function(){
    //上传图片
    $("#btnUpload").click(function() {
        alert(ajaxFileUpload());
    });
  });
  function ajaxFileUpload() {
    // 开始上传文件时显示一个图片
    $("#wait_loading").ajaxStart(function() {
      $(this).show();
    // 文件上传完成将图片隐藏起来
    }).ajaxComplete(function() {
      $(this).hide();
    });
    var elementIds=["flag"]; //flag为id、name属性名
    $.ajaxFileUpload({
      url: 'uploadAjax.htm', 
      type: 'post',
      secureuri: false, //一般设置为false
      fileElementId: 'file', // 上传文件的id、name属性名
      dataType: 'text', //返回值类型,一般设置为json、application/json
      elementIds: elementIds, //传递参数到服务器
      success: function(data, status){ 
        alert(data);
      },
      error: function(data, status, e){ 
        alert(e);
      }
    });
    //return false;
  }
  </script>
 </head>

 <body>
  <div id="wait_loading" style="padding: 50px 0 0 0;display:none;">
    <div style="width: 103px;margin: 0 auto;"><img src="<%=path%20%>/images/loading.gif"/></div>
    <br></br>
    <div style="width: 103px;margin: 0 auto;">请稍等...</div>
    <br></br>
  </div>
  <input type="file" id="file" name="file"><br/>
  <input type="hidden" id="flag" name="flag" value="ajax文件上传"/>
  <input type="button" id="btnUpload" value="上传图片" />
 </body>
</html>

上述便是本文的全体内容,希望对大家学习jquery程序设计有所帮忙。

本文实例为大家大饱眼福了AjaxFileUpload完成文件上传的切实可行代码,供我们参谋,具体内容…

jQuery插件AjaxFileUpload用来贯彻ajax文件上传,该插件使用特别轻松,接下去写个demo演示怎么用AjaxFileUpload插件达成公文上传。

jQuery插件AjaxFileUpload能够兑现ajax文件上传,该插件使用极度简单,首先掌握一下不易选拔AjaxFileUpload插件的议程,然后再精通一些周围的错误新闻和缓慢解决方法。

1、引进AjaxFileUpload插件相关的js

使用验证

复制代码 代码如下:

内需采纳jQuery库文件 和AjaxFileUpload库文件

<script type=”text/javascript”
src=”<%=basePath%>resources/js/jquery-1.2.1.js”></script>
<script type=”text/javascript”
src=”<%=basePath%>resources/js/ajaxfileupload.js”></script>

动用实例

备注:测验发现,ajaxfileupload对jQuery版本是有要求的,在利用中ajaxfileupload和jQuery对应的js版本要长久以来,否则会产生相当发生,能够从ajaxfileupload官方网站下载,避免版本争持。

2、完成上传功能代码

一,包括文件部分

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/base.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <base href="<%=basePath%>">

 <title>ajax文件上传</title>

 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <meta http-equiv="expires" content="0"> 
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <link rel="stylesheet" type="text/css" href="validate/ajaxfileupload.css" />
 <script type="text/javascript" src="validate/jquery-1.6.2.min.js"></script>
 <script type="text/javascript" src="validate/ajaxfileupload.js" ></script>
 <script type="text/javascript">
 $(function(){
 //上传图片
 $("#btnUpload").click(function() {
  alert(ajaxFileUpload());
 });
 });
 function ajaxFileUpload() {
 // 开始上传文件时显示一个图片
 $("#wait_loading").ajaxStart(function() {
  $(this).show();
 // 文件上传完成将图片隐藏起来
 }).ajaxComplete(function() {
  $(this).hide();
 });
 var elementIds=["flag"]; //flag为id、name属性名
 $.ajaxFileUpload({
  url: 'uploadAjax.htm', 
  type: 'post',
  secureuri: false, //一般设置为false
  fileElementId: 'file', // 上传文件的id、name属性名
  dataType: 'text', //返回值类型,一般设置为json、application/json
  elementIds: elementIds, //传递参数到服务器
  success: function(data, status){ 
  alert(data);
  },
  error: function(data, status, e){ 
  alert(e);
  }
 });
 //return false;
 }
 </script>
 </head>

 <body>
 <div id="wait_loading" style="padding: 50px 0 0 0;display:none;">
 <div style="width: 103px;margin: 0 auto;"><img src="<%=path%20%>/images/loading.gif"/></div>
 <br></br>
 <div style="width: 103px;margin: 0 auto;">请稍等...</div>
 <br></br>
 </div>
 <input type="file" id="file" name="file"><br/>
 <input type="hidden" id="flag" name="flag" value="ajax文件上传"/>
 <input type="button" id="btnUpload" value="上传图片" />
 </body>
</html>

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”
src=”ajaxfileupload.js”></script>
二,HTML部分

越来越多精彩内容请参考专项论题《ajax上传本领汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》开展学习。

<img id=”loading ” src=”loading.gif” style=”display:none;”>
<input id=”fileToUpload ” type=”file” size=”20″ name=”fileToUpload ”
class=”input”>
<button class=”button” id=”buttonUpload” onclick=”return
ajaxFileUpload ();”>上传</button>
只需要四个要素,一个动态加载小Logo、三个文件域和三个按键
留神:使用AjaxFileUpload插件上传文件可不需求form,如下:

上述正是本文的全部内容,希望对大家学习jquery程序设计具备援助。

<form name=”form” action=”” method=”POST”
enctype=”multipart/form-data”>
……相关html代码……
</form>
因为AjaxFileUpload插件会自动生成一个form提交表单。

你恐怕感兴趣的小说:

  • ThinkPHP结合AjaxFileUploader达成无刷新文件上传的主意
  • ajaxFileUpload.js插件援救多文本上传的章程
  • 选取AjaxFileUpload.js达成异步文件上传示例
  • 动用ajaxfileupload插件完毕文件上传无刷新的具体方法
  • JavaWeb中struts2兑现公文上传下载功效实例深入分析
  • JavaEE中struts2达成文件上传下载功效实例解析
  • AjaxFileUpload+Struts2贯彻多文件上传作用

对于file文件域ID和name,ajaxFileUpload插件fileElementId参数须要获得文件域ID,要是管理上传文件操作就必要驾驭文件域name,以便获得上传文件新闻,这两边境海关系势供给清楚。

三,javascript部分

<script type=”text/javascript”>
function ajaxFileUpload (){
loading();//动态加载小Logo
$.ajaxFileUpload ({
url :’upload.php’,
secureuri :false,
fileElementId :’fileToUpload’,
dataType : ‘json’,
success : function (data, status){
if(typeof(data.error) != ‘undefined’){
if(data.error != ”){
alert(data.error);
}else{
alert(data.msg);
}
}
},
error: function (data, status, e){
alert(e);
}
})
return false;
}
function loading (){
$(“#loading “).ajaxStart(function(){
$(this).show();
}).ajaxComplete(function(){
$(this).hide();
});
}
</script>
重要参数表明:
1,url代表管理文件上传操作的文本路线,能够测验U昂CoraL是或不是能在浏览器中一贯访谈,如上:upload.php
2,fileElementId表示文件域ID,如上:fileToUpload
3,secureuri是还是不是启用安全付诸,默感到false
4,dataType数据数据,一般选json,javascript的原生态
5,success提交成功后管理函数
6,error提交失利管理函数

上边有七个章程,一个动态加载小图标提醒函数loading()和ajaxFileUpload文件上传$.ajaxFileUpload()函数,那与大家应用jQuery.ajax()函数几乎,使用很简短,这里本身大致了PHP管理上传文件,使用jQuery插件
AjaxFileUpload落成ajax文件就那样简单。

何况我们供给掌握有关的荒唐提醒

1,SyntaxError: missing ; before statement错误
如若出现这一个荒唐就必要检查url路线是或不是足以访谈

2,SyntaxError: syntax error错误
假使出现那一个指鹿为马就要求检讨管理提交操作的PHP文件是不是留存语法错误

3,SyntaxError: invalid property id错误
纵然出现这么些错误就须要检查属性ID是不是留存

4,SyntaxError: missing } in XML expression错误
一经出现那个荒唐就供给检查文件域名称是还是不是同样或不设有

5,别的自定义错误
咱们可利用变量$error直接打字与印刷的措施行检查查各参数是不是正确,比起上面那几个不算的一无可取提醒依然有益广大。

行使jQuery插件AjaxFileUpload完成无刷新上传文件非常实用,由于其轻易易用,因些这些插件相比别的文件上传插件使用人口最多,非常值得推荐。

 

拍卖页面:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

public partial class web_ajax_FileUpload : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        HttpFileCollection files = HttpContext.Current.Request.Files;

        //if (files[0].ContentLength > 5)
        //{
        //    Response.Write(“{“);
        //    Response.Write(“msg:'” + files[0].FileName + “‘,”);
        //    Response.Write(“error:’文件上传失利'”);
        //    Response.Write(“}”);
        //}
        //else
        //{
        //    Response.Write(“{“);
        //    Response.Write(“msg:’未有公文被上传’,”);
        //    Response.Write(“error:’文件上传失利'”);
        //    Response.Write(“}”);
        //}
        files[0].SaveAs(“d:/adw.jpg”);
        Response.Write(“{“);
        Response.Write(“msg:’a’,”);
        Response.Write(“error:””);
        Response.Write(“}”);

        //Response.Write(“{“);
        //Response.Write(“msg:’ggg\n’,”);
        //Response.Write(“error:’aa\n'”);
        //Response.Write(“}”);
        Response.End();
    }
}

 


相关文章