文档章节

ajaxfileupload上传文件

chaun
 chaun
发布于 2016/04/14 17:04
字数 1707
阅读 148
收藏 3

1、ajaxfileupload.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
    String path = request.getContextPath();

%>
<html>
<head>
    <title>uploadifive-demo</title>
    <script src="${pageContext.request.contextPath}/jslib/uploadifive-v1.2.2-standard/jquery.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/jslib/ajaxfileupload/ajaxfileupload.js" type="text/javascript"></script>

    <script type="text/javascript">
        function ajaxFileUpload(){
            //开始上传文件时显示一个图片,文件上传完成将图片隐藏
            //$("#loading").ajaxStart(function(){$(this).show();}).ajaxComplete(function(){$(this).hide();});
            //执行上传文件操作的函数
            $.ajaxFileUpload({
                //处理文件上传操作的服务器端地址(可以传参数,已亲测可用)
                url:'${pageContext.request.contextPath}/userController/fileUpload.do?uname=玄玉',
                secureuri:false,                           //是否启用安全提交,默认为false
                fileElementId:'myBlogImage',               //文件选择框的id属性
                dataType:'text',                           //服务器返回的格式,可以是json或xml等
                success:function(data, status){            //服务器响应成功时的处理函数
                    data = data.replace(/<pre.*?>/g, '');  //ajaxFileUpload会对服务器响应回来的text内容加上<pre style="....">text</pre>前后缀
                    data = data.replace(/<PRE.*?>/g, '');
                    data = data.replace("<PRE>", '');
                    data = data.replace("</PRE>", '');
                    data = data.replace("<pre>", '');
                    data = data.replace("</pre>", '');     //本例中设定上传文件完毕后,服务端会返回给前台[0`filepath]
                    if(data.substring(0, 1) == 0){         //0表示上传成功(后跟上传后的文件路径),1表示失败(后跟失败描述)
                        $("img[id='uploadImage']").attr("src", data.substring(2));
                        $('#result').html("图片上传成功<br/>");
                    }else{
                        $('#result').html('图片上传失败,请重试!!');
                    }
                },
                error:function(data, status, e){ //服务器响应失败时的处理函数
                    $('#result').html('图片上传失败,请重试!!');
                }
            });
        }
    </script>
</head>
<body>
    <h1>ajaxfileupload Demo</h1>

    <div id="result"></div>
    <img id="uploadImage" src="http://www.firefox.com.cn/favicon.ico">

    <input type="file" id="myBlogImage" name="myfiles"/>
    <input type="button" value="上传图片" onclick="ajaxFileUpload()"/>

    <!--
    AjaxFileUpload简介
    官网:http://phpletter.com/Our-Projects/AjaxFileUpload/
    简介:jQuery插件AjaxFileUpload能够实现无刷新上传文件,并且简单易用,它的使用人数很多,非常值得推荐
    注意:引入js的顺序(它依赖于jQuery)和页面中并无表单(只是在按钮点击的时候触发ajaxFileUpload()方法)
    常见错误及解决方案如下
    1)SyntaxError: missing ; before statement
      --检查URL路径是否可以访问
    2)SyntaxError: syntax error
      --检查处理提交操作的JSP文件是否存在语法错误
    3)SyntaxError: invalid property id
      --检查属性ID是否存在
    4)SyntaxError: missing } in XML expression
      --检查文件域名称是否一致或不存在
    5)其它自定义错误
      --可使用变量$error直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多
     -->
</body>
</html>

2、controller.java

/**
 * 这里这里用的是MultipartFile[] myfiles参数,所以前台就要用<input type="file" name="myfiles"/>
 * 上传文件完毕后返回给前台[0`filepath],0表示上传成功(后跟上传后的文件路径),1表示失败(后跟失败描述)
 */
@RequestMapping(value="/fileUpload")
public String addUser(@RequestParam("uname") String uname, @RequestParam MultipartFile[] myfiles, HttpServletRequest request, HttpServletResponse response) throws IOException{
    //可以在上传文件的同时接收其它参数
    System.out.println("收到用户[" + uname + "]的文件上传请求");
    //如果用的是Tomcat服务器,则文件会上传到\\%TOMCAT_HOME%\\webapps\\YourWebProject\\upload\\文件夹中
    //这里实现文件上传操作用的是commons.io.FileUtils类,它会自动判断/upload是否存在,不存在会自动创建
    String realPath = request.getSession().getServletContext().getRealPath("/upload");
    //设置响应给前台内容的数据格式
    response.setContentType("text/plain; charset=UTF-8");
    //设置响应给前台内容的PrintWriter对象
    PrintWriter out = response.getWriter();
    //上传文件的原名(即上传前的文件名字)
    String originalFilename = null;
    //如果只是上传一个文件,则只需要MultipartFile类型接收文件即可,而且无需显式指定@RequestParam注解
    //如果想上传多个文件,那么这里就要用MultipartFile[]类型来接收文件,并且要指定@RequestParam注解
    //上传多个文件时,前台表单中的所有<input type="file"/>的name都应该是myfiles,否则参数里的myfiles无法获取到所有上传的文件
    for(MultipartFile myfile : myfiles){
        if(myfile.isEmpty()){
            out.print("1`请选择文件后上传");
            out.flush();
            return null;
        }else{
            originalFilename = myfile.getOriginalFilename();
            System.out.println("文件原名: " + originalFilename);
            System.out.println("文件名称: " + myfile.getName());
            System.out.println("文件长度: " + myfile.getSize());
            System.out.println("文件类型: " + myfile.getContentType());
            System.out.println("========================================");
            try {
                //这里不必处理IO流关闭的问题,因为FileUtils.copyInputStreamToFile()方法内部会自动把用到的IO流关掉
                //此处也可以使用Spring提供的MultipartFile.transferTo(File dest)方法实现文件的上传
                FileUtils.copyInputStreamToFile(myfile.getInputStream(), new File(realPath, originalFilename));
            } catch (IOException e) {
                System.out.println("文件[" + originalFilename + "]上传失败,堆栈轨迹如下");
                e.printStackTrace();
                out.print("1`文件上传失败,请重试!!");
                out.flush();
                return null;
            }
        }
    }
    //此时在Windows下输出的是[D:\Develop\apache-tomcat-6.0.36\webapps\AjaxFileUpload\\upload\愤怒的小鸟.jpg]
    //System.out.println(realPath + "\\" + originalFilename);
    //此时在Windows下输出的是[/AjaxFileUpload/upload/愤怒的小鸟.jpg]
    //System.out.println(request.getContextPath() + "/upload/" + originalFilename);
    //不推荐返回[realPath + "\\" + originalFilename]的值
    //因为在Windows下<img src="file:///D:/aa.jpg">能被firefox显示,而<img src="D:/aa.jpg">firefox是不认的
    out.print("0`" + request.getContextPath() + "/upload/" + originalFilename);
    out.flush();
    return null;
}

3、ajaxfileupload.js

jQuery.extend({
   

    createUploadIframe: function(id, uri)
   {
         //create frame
            var frameId = 'jUploadFrame' + id;
            var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
         if(window.ActiveXObject)
         {
                if(typeof uri== 'boolean'){
               iframeHtml += ' src="' + 'javascript:false' + '"';

                }
                else if(typeof uri== 'string'){
               iframeHtml += ' src="' + uri + '"';

                }  
         }
         iframeHtml += ' />';
         jQuery(iframeHtml).appendTo(document.body);

            return jQuery('#' + frameId).get(0);         
    },
    createUploadForm: function(id, fileElementId, data)
   {
      //create form  
      var formId = 'jUploadForm' + id;
      var fileId = 'jUploadFile' + id;
      var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');   
      if(data)
      {
         for(var i in data)
         {
            jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
         }        
      }     
      var oldElement = jQuery('#' + fileElementId);
      var newElement = jQuery(oldElement).clone();
      jQuery(oldElement).attr('id', fileId);
      jQuery(oldElement).before(newElement);
      jQuery(oldElement).appendTo(form);


      
      //set attributes
      jQuery(form).css('position', 'absolute');
      jQuery(form).css('top', '-1200px');
      jQuery(form).css('left', '-1200px');
      jQuery(form).appendTo('body');    
      return form;
    },

    ajaxFileUpload: function(s) {
        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout      
        s = jQuery.extend({}, jQuery.ajaxSettings, s);
        var id = new Date().getTime()        
      var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));
      var io = jQuery.createUploadIframe(id, s.secureuri);
      var frameId = 'jUploadFrame' + id;
      var formId = 'jUploadForm' + id;      
        // Watch for a new set of requests
        if ( s.global && ! jQuery.active++ )
      {
         jQuery.event.trigger( "ajaxStart" );
      }            
        var requestDone = false;
        // Create the request object
        var xml = {}   
        if ( s.global )
            jQuery.event.trigger("ajaxSend", [xml, s]);
        // Wait for a response to come back
        var uploadCallback = function(isTimeout)
      {        
         var io = document.getElementById(frameId);
            try 
         {           
            if(io.contentWindow)
            {
                xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
                    xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
                
            }else if(io.contentDocument)
            {
                xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
                   xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
            }                 
            }catch(e)
         {
            jQuery.handleError(s, xml, null, e);
         }
            if ( xml || isTimeout == "timeout") 
         {           
                requestDone = true;
                var status;
                try {
                    status = isTimeout != "timeout" ? "success" : "error";
                    // Make sure that the request was successful or notmodified
                    if ( status != "error" )
               {
                        // process the data (runs the xml through httpData regardless of callback)
                        var data = jQuery.uploadHttpData( xml, s.dataType );    
                        // If a local callback was specified, fire it and pass it the data
                        if ( s.success )
                            s.success( data, status );
    
                        // Fire the global callback
                        if( s.global )
                            jQuery.event.trigger( "ajaxSuccess", [xml, s] );
                    } else
                        jQuery.handleError(s, xml, status);
                } catch(e) 
            {
                    status = "error";
                    jQuery.handleError(s, xml, status, e);
                }

                // The request was completed
                if( s.global )
                    jQuery.event.trigger( "ajaxComplete", [xml, s] );

                // Handle the global AJAX counter
                if ( s.global && ! --jQuery.active )
                    jQuery.event.trigger( "ajaxStop" );

                // Process result
                if ( s.complete )
                    s.complete(xml, status);

                jQuery(io).unbind()

                setTimeout(function()
                           {  try 
                              {
                                 jQuery(io).remove();
                                 jQuery(form).remove(); 
                                 
                              } catch(e) 
                              {
                                 jQuery.handleError(s, xml, null, e);
                              }                          

                           }, 100)

                xml = null

            }
        }
        // Timeout checker
        if ( s.timeout > 0 ) 
      {
            setTimeout(function(){
                // Check to see if the request is still happening
                if( !requestDone ) uploadCallback( "timeout" );
            }, s.timeout);
        }
        try 
      {

         var form = jQuery('#' + formId);
         jQuery(form).attr('action', s.url);
         jQuery(form).attr('method', 'POST');
         jQuery(form).attr('target', frameId);
            if(form.encoding)
         {
            jQuery(form).attr('encoding', 'multipart/form-data');                
            }
            else
         {  
            jQuery(form).attr('enctype', 'multipart/form-data');         
            }        
            jQuery(form).submit();

        } catch(e) 
      {        
            jQuery.handleError(s, xml, null, e);
        }
      
      jQuery('#' + frameId).load(uploadCallback  );
        return {abort: function () {}};    

    },

    uploadHttpData: function( r, type ) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        // If the type is "script", eval it in global context
        if ( type == "script" )
            jQuery.globalEval( data );
        // Get the JavaScript object, if JSON is used.
        if ( type == "json" )
            eval( "data = " + data );
        // evaluate scripts within html
        if ( type == "html" )
            jQuery("<div>").html(data).evalScripts();

        return data;
    }
})


© 著作权归作者所有

chaun
粉丝 92
博文 269
码字总数 91059
作品 0
深圳
高级程序员
私信 提问
ajaxFileUpload图片上传、限制后缀和张数 带参数

ajaxFileUpload图片上传、限制后缀和张数 带参数 HTML: <input type="file" name="img" id="fileToUpload" style="width:180px;" onchange="ajaxFileUpload(this);" /><span class="info">(......

markYun
2013/09/07
7.8K
1
jQuery插件AjaxFileUpload实现ajax文件上传

1、引入AjaxFileUpload插件相关的js <script type="text/javascript" src="<%=basePath%>resources/js/jquery-1.2.1.js"></script><script type="text/javascript" src="<%=basePath%>resou......

刘yu
2015/04/22
257
0
文件上传,因为业务需要,需要读取excel流2次,在第二次读取的时候,用chrome就会丢失

struts2文件上传,用的ajaxfileupload插件进行上传,因为业务需要,判断是否继续上传文件,如果选择了是,则再一次进行ajaxfileupload提交,读取流,而这种情况出现在chrome浏览器就出现流丢...

tym33
2015/08/14
94
0
ajax上传文件 预览/七牛云AJAX上传

ajaxfileupload下载:链接: http://pan.baidu.com/s/1dDtX6Pb 密码: qqi2 $('.upload-success').show(300).delay(3000).hide(300); //2S后隐藏 需要用到:ajaxfileupload <!DOCTYPE html><htm......

wsy5344
2015/06/06
6.6K
1
Spring Jackson AjaxFileUpload 没有执行回调函数的解决办法

在使用Spring MVC+Jackson与AjaxFileUpload进行图片上传并返回图片地址时,图片上传没有问题,但是ajaxfileupload的success回调并没有执行,找了半天没找到原因,firebug显示response的json也...

方绍伟
2013/10/21
196
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
7
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
7
0
Flutter系列之在 macOS 上安装和配置 Flutter 开发环境

本文为Flutter开发环境在macOS下安装全过程: 一、系统配置要求 想要安装并运行 Flutter,你的开发环境需要最低满足以下要求: 操作系统:macOS(64位) 磁盘空间:700 MB(不包含 IDE 或其余...

過愙
昨天
6
0
OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
昨天
2.5K
16
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
昨天
42
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部