jquery ajax异步上传

发布时间:2020-06-25 16:40:21 作者:javahz
来源:网络 阅读:11799
  找了好久终于在网上找到了ajax异步上传文件的方法,不过网上大多数是php的 ,我改为struts2写的 大同小异,希望对学习java的人有一定的帮助。我上传的是音乐文件。ajaxfileupload.js这个js文件是主要文件,一定要导入。
 jsp页面 ,其中我还做了div的隐藏*****************************
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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>Uploadify</title>
<style type="text/css">
#div1{
color: #000000; font-size: 12px;
    border: 0px solid #74B3DC;
    color: #000;
    background: #fff;
display:none;
}
</style>
 <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
      <script type="text/javascript" src="js/ajaxfileupload.js"></script>
      <!-- 执行上传文件操作的函数 -->
      <script type="text/javascript">
          function ajaxFileUpload(){
               $.ajaxFileUpload(
                   {
                url:'uploadAction.action',            //需要链接到服务器地址
                secureuri:false,
                fileElementId:'upload',                     //文件选择框的id属性
                dataType: 'json',                           //服务器返回的格式
                success: function (data, status)            //相当于java中try语句块的用法
               {  
               // alert(data);
                   var ss =data;
                  // alert(ss);
                   var mp3Name = ss.split(";");
                    for(var i=0; i<mp3Name.length;i++) {
                      //alert(mp3Name[i]);
                      $('#songName').val(mp3Name[0]);
                      $('#songsiger').val(mp3Name[1]);
                    }
                  
                    $('#result').html('添加成功');
                },
                error: function (data, status, e)            //相当于java中catch语句块的用法
                {
                    //alert("222.");
                    $('#result').html('添加失败');
                }
            }
                 
               );
            target=document.getElementById('div1');
            if (target.style.display=="block"){
                target.style.display="none";
            } else {
                target.style.display="block";
            }
          }
      </script>
     
</head>
<body>
      <form method="post" action="uploadAction.action" enctype="multipart/form-data">
        <input type="file" id="upload" name="upload"/>
        <input type="button" value="上传文档" onclick="ajaxFileUpload()"/>
    <div id="result"></div>
        <div id="div1">
        歌曲<input type="text" id="songName" name="songName" value="">
       歌手 <input type="text" id="songsiger" name="songName" value="">
        <input type="button" value="提交文档信息" />
       </div>
    </form>
  
  </body>
</html>
action上传后台代码*************************************
package action;

import java.io.File;
import java.io.IOException;
import java.io.OutputStream;

import org.apache.commons.io.FileUtils;
import org.apache.struts2.json.annotations.JSON;
import org.farng.mp3.MP3File;
import org.farng.mp3.TagException;
import org.farng.mp3.id3.AbstractID3v2;
import org.farng.mp3.id3.ID3v1;
import org.farng.mp3.lyrics3.AbstractLyrics3;

import com.base.BaseAction;
import com.opensymphony.xwork2.ActionSupport;

public class Upload extends BaseAction {
private static final long serialVersionUID = -4848248679889814408L;
private String fileName;
private File upload;
public File getUpload() {
    return upload;
}


public void setUpload(File upload) {
    this.upload = upload;
}


public void setUploadFileName(String fileName) {
    this.fileName = fileName;
}


/*
 * 歌曲上传 上传操作
 */
public void uploadAction() throws IOException {
    System.out.println("进入了该方法!");
        String targetDirectory = "D:\\upload";
        System.out.println(upload);
        File target = new File(targetDirectory, fileName);
        FileUtils.copyFile(upload, target);
        String path = targetDirectory+"\\"+fileName;
          
          try { 
             
                MP3File file = new MP3File(path);//1,lyrics
                AbstractID3v2 id3v2 = file.getID3v2Tag(); 
                ID3v1 id3v1 = file.getID3v1Tag(); 
                String ss = "";
                if (id3v2 != null) { 
                     
                    System.out.println("id3v2"); 
                        ss = id3v2.getAlbumTitle()+";"+id3v2.getSongTitle()+";"+id3v2.getLeadArtist();
                        //String str = "{'msg','"+ss+"'}";
                        String str = ss;
                        outPut(str);
                    System.out.println(id3v2.getAlbumTitle());//专辑名 
                    System.out.println(id3v2.getSongTitle());//歌曲名 
                    System.out.println(id3v2.getLeadArtist());//歌手 
     
                } else { 
                    System.out.println("id3v1"); 
     
                    System.out.println(id3v1.getAlbumTitle()); 
                    System.out.println(id3v1.getSongTitle()); 
                    System.out.println(id3v1.getLeadArtist()); 
     
                } 
     
                AbstractLyrics3 lrc3Tag = file.getLyrics3Tag(); 
                if (lrc3Tag != null) { 
                    String lyrics = lrc3Tag.getSongLyric(); 
                    System.out.println(lyrics); 
                } 
     
            } catch (IOException e) { 
                e.printStackTrace(); 
            } catch (TagException e) { 
                e.printStackTrace(); 
            } 
     
            System.out.println("over"); 
 }
}

struts.xml配置文件*********************************
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
    <constant name="struts.i18n.encoding" value="UTF-8"/>
       //设置上传文件最大量
        <constant name="struts.multipart.maxSize" value="10485760"/>
   
    <package name="upload" namespace="/" extends="struts-default" >
         <action name="uploadAction" class="action.Upload" method="uploadAction">
             <result name="success">/index.jsp</result>
           
         </action>
    </package>
</struts>

  后来经过调试,发现火狐和ie不兼容 导致无执行争取结果,所以我上传ajaxfileupload.js 我修改了源码


附件:http://down.51cto.com/data/2359651
推荐阅读:
  1. Jquery异步上传文件代码实例
  2. jquery使用FormData实现异步上传文件

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

职场 ajax 休闲

上一篇:最新OSSIM改装平台DEMO WebUI

下一篇:三、配置管理远程命令、配置管理任务计划、其他命令、salt-ssh使用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》