jquery中的ajax異步上傳實例

發(fā)布時間：2021-08-04 20:24:25 來源：億速云閱讀：103 作者：chen 欄目：web開發(fā)

這篇文章主要講解了“jquery中的ajax異步上傳實例”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“jquery中的ajax異步上傳實例”吧！

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>
   <!-- 執(zhí)行上傳文件操作的函數(shù) -->
   <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>

后來經(jīng)過調(diào)試，發(fā)現(xiàn)火狐和ie不兼容導致無執(zhí)行爭取結(jié)果，所以我上傳ajaxfileupload.js 我修改了源碼

感謝各位的閱讀，以上就是“jquery中的ajax異步上傳實例”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對jquery中的ajax異步上傳實例這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！

向AI問一下細節(jié)

jquery中的ajax異步上傳實例

猜你喜歡

最新資訊

相關推薦

相關標簽