jquery中的ajax非同步上傳_AJAX相關

來源:互聯網
上載者:User

找了好久終於在網上找到了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>

  後來經過調試,發現Firefox和ie不相容 導致無執行爭取結果,所以我上傳ajaxfileupload.js 我修改了源碼

以上是本文給大家介紹jquery中的ajax非同步上傳,希望對大家有所協助。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.