jquery中的ajax异步上传

前端技术 2023/09/05 AJAX

找了好久终于在网上找到了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 我修改了源码

以上是本文给大家介绍jquery中的ajax异步上传，希望对大家有所帮助。

本文地址：https://www.stayed.cn/item/13878

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案