zoukankan      html  css  js  c++  java
  • ajaxfileupload的应用

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding
    ="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        
    <head>
            
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            
    <title>Insert title here</title>
            
    <script type="text/javascript" src="js/jquery.js"></script>
            
    <script type="text/javascript" src="js/ajaxfileupload.js"></script>
            
    <script type="text/javascript">
        
    function ajaxFileUpload()
        {
            
            $(
    "#loading")
            .ajaxStart(
    function(){
                $(
    this).show();
            })
    //开始上传文件时显示一个图片
            .ajaxComplete(function(){
                $(
    this).hide();
            });
    //文件上传完成将图片隐藏起来
            
            $.ajaxFileUpload
            (
                {
                    url:'fileUploadAction.action',
    //用于文件上传的服务器端请求地址
                    secureuri:false,//一般设置为false
                    fileElementId:'file',//文件上传空间的id属性  <input type="file" id="file" name="file" />
                    dataType: 'json',//返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        alert(data.message);
    //从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量
                        
                        
    if(typeof(data.error) != 'undefined')
                        {
                            
    if(data.error != '')
                            {
                                alert(data.error);
                            }
    else
                            {
                                alert(data.message);
                            }
                        }
                    },
                    error: 
    function (data, status, e)//服务器响应失败处理函数
                    {
                        alert(e);
                    }
                }
            )
            
            
    return false;

        }
        
    </script>
        
    </head>
        
    <body>
            
    <img src="loading.gif" id="loading" style="display: none;">
            
    <input type="file" id="file" name="file" />
            
    <br />
            
    <input type="button" value="上传" onclick="return ajaxFileUpload();">
        
    </body>
    </html>

     注意观察<body>中的代码,并没有form表单。只是在按钮点击的时候触发ajaxFileUpload()方法。需要注意的是js文件引入的先后顺序,ajaxfileupload.js依赖于jquery因此你知道的。
    点我下载工程代码

  • 相关阅读:
    java中string与json互相转化
    UVa 10125
    IOS开发之蘑菇街框架
    从头认识设计模式-策略模式-03-思考过程二:在每个类里面单独添加方法或者添加接口
    使用spring-loaded开源项目,实现java程序和web应用的热部署
    矩阵高速幂专题(二)
    EBS 第一个项目 学习总结 ---- 发运模块
    关于App程序猿泡沫
    Go 语言编程
    jar运行main函数的方法
  • 原文地址:https://www.cnblogs.com/guozhe/p/2366130.html
Copyright © 2011-2022 走看看