45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:jquery ajax异步上传的实例分享

jquery ajax异步上传的实例分享

2015-09-28 09:29:36 来源:www.45fan.com 【

jquery 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异步上传,希望对大家有所帮助。


本文地址:http://www.45fan.com/bcdm/22433.html
Tags: 中的 ajax jquery
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部