`

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

分享到:
评论

相关推荐

    毕业论文-叮当活动报名V1.0.0 开源版-整站商业源码.zip

    毕业论文-叮当活动报名V1.0.0 开源版-整站商业源码.zip

    c#随机输出14个字符串代码.zip

    c#随机输出14个字符串代码.zip

    【工程机械领域】批量工件并行切割下料优化:多刀具系统协同工作下的板材利用率与切割效率提升方案设计

    内容概要:文章主要探讨了批量工件并行切割下料的问题,重点在于优化切割方案以提高板材利用率、减少切割时间和降低能耗。文中详细介绍了切割机的工作原理及其运动方式,以及对不同尺寸板材(A: 8000*3000、B: 6000*2000、C: 7000*2500)的切割要求。提出了五个任务:一是不考虑约束条件下,为三种板材设计切割排版方案以最大化板材利用率;二是基于四把切割刀具,规划最短时间完成切割的协同运行方案;三是根据附件2提供的工件型号分布,确定切割这批工件所需的板材数量和排版方案,以最大化板材利用率;四是使用八把切割刀具,在保证板材利用率不低于之前方案95%的前提下,最小化切割时间;五是综合考虑板材、设备时间和能量的成本,利用最多十把切割刀具,最小化总成本。;

    windows11+Java-jdk1.8版本+neo4j-community-3.5.6

    **描述:“适用于JDK8的环境”** 本文将深入探讨Neo4j社区版3.5.6版本,这是一个基于图数据库的强大工具,特别适用于知识图谱构建和可视化。由于其运行需求,必须在Java Development Kit(JDK)8的环境下进行安装和操作。 **一、Neo4j概述** Neo4j是一款开源的图形数据库,它以节点、关系和属性的形式存储数据,这使得处理复杂网络结构的数据变得更为直观和高效。Neo4j社区版是免费的,适合开发和学习用途,而企业版则提供了更多的高级功能和服务。 **二、JDK8要求** 为了运行Neo4j 3.5.6,你需要在你的计算机上安装JDK8。JDK是Java开发工具包,包含了运行Java应用程序所需的Java虚拟机(JVM)以及一系列开发工具。确保安装的是与Neo4j版本兼容的JDK版本至关重要,因为不兼容的JDK可能会导致运行错误或性能问题。 **三、安装和配置** 1. **下载与解压**: 从官方渠道下载"neo4j-community-3.5.6.zip"压缩文件,并将其解压到你选择的目录。 2. **环境变量配置**: 配置系统环境变量,将Neo4j的bin目录添加到PATH环境变量中,以便于命令行启动和管理数据库。 3. **修改配置文件**: Neo4j的配置主要通过`conf/neo4j.conf`文件进行,如需更改默认设置,如内存分配、端口设置等,应在此文件中进行修改。 4. **启动和停止**: 使用`neo4j console`命令启动服务,`neo4j stop`命令关闭服务。 **四、知识图谱与可视化** Neo4j因其强大的图数据模型,成为构建知识图谱的理想选择。你可以使用Cypher查询语言来操作和查询图数据,它的语法简洁且直观,易于学习。 1. **Cypher语言**: Cypher是一种声明式、图形化

    flatbuffers/////

    flatbuffers/////

    AGV技术详解.pdf

    AGV技术详解.pdf

    Protozoa,一种基于WebRTC的多媒体隐蔽传输工具

    内容概要:本文介绍了Protozoa,一种基于WebRTC的多媒体隐蔽传输工具,旨在帮助用户绕过互联网审查。Protozoa利用WebRTC视频通话作为载体,通过修改WebRTC框架中的编码视频帧来嵌入并传输隐蔽数据。它具有高带宽性能(可达1.4Mbps)和强大的流量分析抗性,能够在不被检测的情况下传输任意IP流量。实验表明,Protozoa可以在不同网络条件下保持稳定性能,并成功绕过中国、俄罗斯和印度的国家级审查机制。 适合人群:对网络安全、隐蔽通信技术感兴趣的科研人员和技术专家,以及需要绕过互联网审查访问受限内容的用户。 使用场景及目标:①适用于希望在受限制网络环境中安全、隐蔽地访问互联网资源的技术人员;②研究和测试新型隐蔽通信方法的研究人员;③评估和改进隐蔽通信系统的安全性和性能。 阅读建议:由于涉及复杂的网络协议和技术细节,建议读者具备一定的计算机网络和编程基础。重点关注Protozoa的工作原理、实现方式及其与现有隐蔽通信工具的比较,以便更好地理解和应用这一技术。

    毕业论文-发卡-整站商业源码.zip

    毕业论文-发卡-整站商业源码.zip

    实训商业源码-智答-更好用的语音问答6.0.4-毕业设计.zip

    实训商业源码-智答-更好用的语音问答6.0.4-毕业设计.zip

    实训商业源码-免签码支付源码-毕业设计.zip

    实训商业源码-免签码支付源码-毕业设计.zip

    毕业论文-房产中介小程序8.0.56+开源版-整站商业源码.zip

    毕业论文-房产中介小程序8.0.56+开源版-整站商业源码.zip

    毕业论文-活动报名小程序-整站商业源码.zip

    毕业论文-活动报名小程序-整站商业源码.zip

    ANSYS产品资料——Systems and Multiphysics.pdf

    ANSYS产品资料——Systems and Multiphysics.pdf

    毕业论文-KTV小程序V1.6.1+分销1.0.0带前端-整站商业源码.zip

    毕业论文-KTV小程序V1.6.1+分销1.0.0带前端-整站商业源码.zip

    项目实现了一个多目标优化算法的集成框架,主要用于求解复杂的多目标优化问题(MOPs)(含可运行项目代码)

    该项目实现了一个多目标优化算法的集成框架,主要用于求解复杂的多目标优化问题(MOPs)。其核心功能包括以下方面: 1. **多目标优化算法集成** 项目整合了三种经典的多目标优化算法: - **NSGA-II**:基于非支配排序和拥挤度距离的遗传算法,适用于全局搜索。 - **MOPSO**:多目标粒子群算法,通过粒子群协同搜索和外部存档维护Pareto前沿。 - **NSGAMOPSO**:创新性地结合NSGA-II和MOPSO的双种群协同进化策略,兼顾全局探索与局部开发能力。 2. **测试函数库与问题定义** 提供了47个标准多目标测试函数(如ZDT、DTLZ、UF、WFG系列等)和实际工程问题(如盘式制动器设计),支持2-3目标优化,并内置真实Pareto前沿数据用于性能验证。 3. **性能评估指标** 实现了四种评价指标: - **IGD**(反向世代距离):衡量解集与真实Pareto前沿的接近程度。 - **GD**(世代距离):评估解集的收敛性。 - **HV**(超体积):量化解集的多样性和覆盖范围。 - **Spacing**:反映解集分布的均匀性。 4. **可视化与对比分析** 支持二维/三维Pareto前沿的动态绘图,直观对比不同算法的优化效果,并自动生成指标数据表格(如Excel文件),便于量化分析算法性能。 5. **自适应参数与约束处理** 算法参数(如交叉概率、变异概率)可动态调整,同时通过边界检查和修复机制确保解的可行性。 **应用价值**:该项目为研究者和工程师提供了一个高效、可扩展的多目标优化工具,适用于学术研究、工业设计(如机械优化)等领域,能够快速验证算法性能并解决实际多目标优化问题。

    AVEVA数字时代的智造方式.pdf

    AVEVA数字时代的智造方式.pdf

    毕业论文-叮咚同城微圈小程序V11.3.3+前端 开源版-整站商业源码.zip

    毕业论文-叮咚同城微圈小程序V11.3.3+前端 开源版-整站商业源码.zip

    ### 【电动汽车技术】基于MATLAB的电动汽车预充电路设计与仿真分析:提升电池寿命与充电效率

    内容概要:文章详细探讨了基于MATLAB/Simulink的电动汽车预充电路设计,旨在解决电动汽车启动及充电初始阶段电池系统承受瞬态大电流冲击的问题。文章首先分析了电动汽车技术的发展背景及预充电路的重要性,接着介绍了预充电路的工作原理、设计要点及相关的技术标准。文中通过构建预充电路的MATLAB/Simulink仿真模型,对比了不同预充电阻值对电流冲击的影响,并引入PID控制策略优化预充电过程。最终,通过多工况仿真验证了设计方案的工程适用性和有效性。研究结果显示,优化后的预充电路可将冲击电流峰值抑制在安全阈值范围内,电压过渡过程的稳定性提升35%以上。 适合人群:具备一定电力电子和控制理论基础的电气工程师、从事电动汽车研发的技术人员、高校相关专业的研究生及科研人员。 使用场景及目标:①研究电动汽车预充电路的动态特性及关键参数优化;②设计智能控制策略以提升充电系统的安全性与效率;③验证预充电路在不同工况下的性能表现,为实际应用提供技术支持。 其他说明:本文不仅提供了详细的理论分析和仿真模型构建方法,还展示了仿真实验的具体步骤和结果,强调了预充电路设计对电动汽车整体性能和安全性的关键作用。研究成果不仅适用于锂离子电池预充场景,其多变量控制思路亦可扩展至钠离子电池、固态电池等新型储能系统的充放电管理领域。

    毕业论文-超好看的导航源码-整站商业源码.zip

    毕业论文-超好看的导航源码-整站商业源码.zip

    编程语言Python基础语法入门:涵盖交互式与脚本编程、语法特性及应用实例

    内容概要:本文档主要介绍Python的基础语法,涵盖从环境搭建到基本语法规则的详细讲解。首先介绍了两种编程方式:交互式编程和脚本式编程,并演示了如何在不同操作系统中启动Python解释器。接着重点讲述了Python2.x与Python3.x之间的差异,特别是`print`语句的变化,以及如何通过导入`__future__`包实现兼容。文档还详细解释了Python中的标识符规则、保留字、缩进规范、多行语句的写法、引号的使用、注释方式、空行的作用、用户输入处理、同一行显示多条语句的方法、代码块的构成以及命令行参数的使用。; 适合人群:适合初学者或有一定编程基础,想要系统学习Python基础语法的人员。; 使用场景及目标:①帮助读者快速掌握Python的基本语法,能够编写简单的Python程序;②理解Python2.x和Python3.x之间的差异,确保代码的兼容性;③掌握Python的代码风格和规范,为后续深入学习打下坚实基础。; 阅读建议:由于Python对代码格式有严格的要求,建议读者在学习过程中多动手实践,注意代码的缩进和其他格式要求,同时关注Python2.x与Python3.x的区别,以适应不同的开发环境。

Global site tag (gtag.js) - Google Analytics