首页 / JQUERY / jquery中的ajax异步上传
jquery中的ajax异步上传
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jquery中的ajax异步上传,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4940字,纯文字阅读大概需要8分钟。
内容图文
找了好久终于在网上找到了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异步上传,希望对大家有所帮助。
内容总结
以上是互联网集市为您收集整理的jquery中的ajax异步上传全部内容,希望文章能够帮你解决jquery中的ajax异步上传所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。