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

时间: 2025-01-28 02:33:34

jquery中的ajax异步上传的相关文章

JQuery插件ajaxfileupload.js异步上传文件实例

这篇文章主要介绍了JQuery插件ajaxfileupload.js异步上传文件实例,本文直接给出了HTML代码和JS代码以及后台处理代码,需要的朋友可以参考下     在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用:  代码如下: <scr

Ajax异步上传文件实例代码分享_AJAX相关

非常不多说,直接给大家上干货,写的不好还请见谅. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/Scripts/jquery-1.8.2.min.js"></script> <title>Ind

Ajax异步上传文件实例代码分享

非常不多说,直接给大家上干货,写的不好还请见谅. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/Scripts/jquery-1.8.2.min.js"></script> <title>Ind

asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)_jquery

本文实例讲述了asp.net+jquery.form实现图片异步上传的方法.分享给大家供大家参考,具体如下: 首先我们需要做准备工作: jquery 点击此处本站下载. jquery.form.js 点击此处本站下载. 页面JqueryFormTest.aspx: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryFormTest.aspx.cs" Inherits=

ajax 异步上传带进度条视频并提取缩略图_AJAX相关

最近在做一个集富媒体功能于一身的项目.需要上传视频.这里我希望做成异步上传,并且有进度条,响应有状态码,视频连接,缩略图. 服务端响应 { "thumbnail": "/slsxpt//upload/thumbnail/fdceefc.jpg", "success": true, "link": "/slsxpt//upload/video/fdceefc.mp" } 并且希望我的input file控件不

PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例_php实例

平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.详解ajaxFileUpload插件的语法参数 原理:ajaxfileupload是通过监听iframe的onload方

JavaScript中三种异步上传文件方式_javascript技巧

异步上传文件是为了更好的用户体验,是每个前端必须掌握的技能.这里我提出三点有关异步文件上传的方式. 使用第三方控件,如Flash,ActiveX等浏览器插件上传. 使用隐藏的iframe模拟异步上传. 使用XMLHttpRequest2来实现异步上传. 第一种使用浏览器插件上传,需要一定的底层编码功底,在这里我就不讲了,以免误人子弟,提出这点大家可以自行百度. 第二种使用隐藏的iframe模拟异步上传.为什么在这里说的是模拟呢?因为我们其实是将返回结果放在了一个隐藏的iframe中,所以才没有使

ajax 异步上传带进度条视频并提取缩略图

最近在做一个集富媒体功能于一身的项目.需要上传视频.这里我希望做成异步上传,并且有进度条,响应有状态码,视频连接,缩略图. 服务端响应 { "thumbnail": "/slsxpt//upload/thumbnail/fdceefc.jpg", "success": true, "link": "/slsxpt//upload/video/fdceefc.mp" } 并且希望我的input file控件不

JQuery插件ajaxfileupload.js异步上传文件实例_jquery

在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用: 复制代码 代码如下: <script src="/Content/JQueryJS/jquery-2.1.1.js"></script> <script