jquery中的ajax异步上传-js教程-PHP中文网

首页

web前端

js教程

jquery中的ajax异步上传

亚连

May 25, 2018 am 09:54 AM

ajaxjquery上传

本篇文章给大家介绍jquery中的ajax异步上传，在此需要引入ajaxfileupload.js这个js文件。接下来，有需要的朋友一起学习吧

找了好久终于在网上找到了ajax异步上传文件的方法，不过网上大多数是php的，我改为struts2写的大同小异，希望对学习java的人有一定的帮助。我上传的是音乐文件。

ajaxfileupload.js这个js文件是主要文件，一定要导入。

jsp页面，其中我还做了p的隐藏*****************************

<%@ 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">
#p1{
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:&#39;uploadAction.action&#39;,      //需要链接到服务器地址
        secureuri:false,
        fileElementId:&#39;upload&#39;,           //文件选择框的id属性
        dataType: &#39;json&#39;,              //服务器返回的格式
        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]);
           $(&#39;#songName&#39;).val(mp3Name[0]);
           $(&#39;#songsiger&#39;).val(mp3Name[1]);
          }
          $(&#39;#result&#39;).html(&#39;添加成功&#39;);
        },
        error: function (data, status, e)      //相当于java中catch语句块的用法
        {
          //alert("222.");
          $(&#39;#result&#39;).html(&#39;添加失败&#39;);
        }
      }
        );
      target=document.getElementById(&#39;p1&#39;);
      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()"/>
  <p id="result"></p>
    <p id="p1">
    歌曲<input type="text" id="songName" name="songName" value="">
    歌手 <input type="text" id="songsiger" name="songName" value="">
    <input type="button" value="提交文档信息" />
    </p>
  </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 = "{&#39;msg&#39;,&#39;"+ss+"&#39;}";
            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 我修改了源码

上面是我整理给大家的，希望今后会对大家有帮助。

ASP.NET与Ajax的实现方式

JQuery ajax返回JSON时的处理方式

如何解决JQuery ajaxSubmit提交中文乱码

以上是jquery中的ajax异步上传的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

See all articles