zoukankan      html  css  js  c++  java
  • jQuery插件AjaxFileUpload实现ajax文件上传

    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=" 103px;margin: 0 auto;"><img src="<%=path %>/images/loading.gif"/></div>
            <br></br>
            <div style=" 103px;margin: 0 auto;"><span>请稍等...</span></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>
     

     http://www.cnblogs.com/linjiqin/p/3530848.html

  • 相关阅读:
    18.centos7基础学习与积累-004-分区理论
    绑定省份到select控件
    c#编写1-2+3-4……m
    在写按时间段查询的sql语句的时候 一般我们会这么写查询条件:
    二进制移位运算
    构造datatable临时数据
    svn代表四种检出深度
    关于TTS SpeechVoiceSpeakFlags几个值的中文意思?
    user32.dll中的所有函数
    xaml 微软帮助 url
  • 原文地址:https://www.cnblogs.com/itommy/p/10610371.html
Copyright © 2011-2022 走看看