JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传

异步上传相信大家都做过类似的功能，JqueryAjaxFileUploader为我们提供了更简单的实现和使用方式。不过既然是JQUERY的插件那么它所依赖的环境大家都懂得。JqueryAjaxFileUploader并不华丽，也没有提供美化文件上传控件的css，它并不像jQuery File Upload（喜欢的同学可以去尝试下），提供了美观的样式和专门的图片预览、多任务上传等等， JqueryAjaxFileUploader 所拥有的很简单，只是异步上传文件的功能，当然这并不排除由你亲自为它披上一件华丽的外衣。

jQuery File Uplaod插件官方Demo:

好了言归正传，让我们一起来看下 JqueryAjaxFileUplaoder 的使用步骤：

Java代码  

  1. <html>
  2. <head>
  3. <base href="<%=basePath%>">
  4. <title>My starting page</title>
  5. <meta http-equiv="pragma" content="no-cache">
  6. <meta http-equiv="cache-control" content="no-cache">
  7. <meta http-equiv="expires" content="0">
  8. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  9. <meta http-equiv="description" content="This is my page">
  10. <script type="text/javascript" src="js/jquery.js">
  11. </script>
  12. <script type="text/javascript" src="js/ajaxfileupload.js">
  13. </script>
  14. <script type="text/javascript">
  15. function ajaxFileUpload() {
  16. $("#loading").ajaxStart(function() {
  17. $(this).show();
  18. })//开始上传文件时显示一个图片
  19. .ajaxComplete(function() {
  20. $(this).hide();
  21. });//文件上传完成将图片隐藏起来
  22. $.ajaxFileUpload( {
  23. url : ‘fileUpload.action‘,//用于文件上传的服务器端请求地址
  24. secureuri : false,//一般设置为false
  25. fileElementId : ‘File‘,//文件上传控件的id属性
  26. dataType : ‘json‘,//返回值类型 一般设置为json
  27. success : function(data, status) //服务器成功响应处理函数
  28. {
  29. alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量
  30. if (typeof (data.error) != ‘undefined‘) {
  31. if (data.error != ‘‘) {
  32. alert(data.error);
  33. } else {
  34. alert(data.message);
  35. }
  36. }
  37. },
  38. error : function(data, status, e)//服务器响应失败处理函数
  39. {
  40. alert(e);
  41. }
  42. })
  43. return false;
  44. }
  45. </script>
  46. </head>
  47. <body>
  48. <img src="img/loading.gif" id="loading" style="display: none;">
  49. <input type="file" id="file" name="file" />
  50. <br />
  51. <input type="button" value="上传" onclick="return ajaxFileUpload();">
  52. </body>
  53. </html>

注意：引入JS文件不要搞错了顺序，一定是先引入jQuery再引入插件。否则后果的严重性你是可以想到的。

上文中我请求了一个Action，并在Action里写好所需要的参数，以及文件格式的判断（这里我只是做的伪实现，过滤文件格式还请大家认真考虑），这个大家肯定都熟。

Java代码  

  1. import java.io.File;
  2. import java.io.FileInputStream;
  3. import java.io.FileOutputStream;
  4. import org.apache.struts2.ServletActionContext;
  5. import com.opensymphony.xwork2.ActionSupport;
  6. @SuppressWarnings("serial")
  7. public class FileAction extends ActionSupport {
  8. private File file;
  9. private String fileFileName;
  10. private String fileFileContentType;
  11. private String message = "你已成功上传文件";
  12. public String getMessage() {
  13. return message;
  14. }
  15. public void setMessage(String message) {
  16. this.message = message;
  17. }
  18. public File getFile() {
  19. return file;
  20. }
  21. public void setFile(File file) {
  22. this.file = file;
  23. }
  24. public String getFileFileName() {
  25. return fileFileName;
  26. }
  27. public void setFileFileName(String fileFileName) {
  28. this.fileFileName = fileFileName;
  29. }
  30. public String getFileFileContentType() {
  31. return fileFileContentType;
  32. }
  33. public void setFileFileContentType(String fileFileContentType) {
  34. this.fileFileContentType = fileFileContentType;
  35. }
  36. @SuppressWarnings("deprecation")
  37. @Override
  38. public String execute() throws Exception {
  39. String path = ServletActionContext.getRequest().getRealPath("/upload");
  40. try {
  41. File f = this.getFile();
  42. if(this.getFileFileName().endsWith(".exe")){
  43. message="对不起,你上传的文件格式不允许!!!";
  44. return ERROR;
  45. }
  46. FileInputStream inputStream = new FileInputStream(f);
  47. FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getFileFileName());
  48. byte[] buf = new byte[1024];
  49. int length = 0;
  50. while ((length = inputStream.read(buf)) != -1) {
  51. outputStream.write(buf, 0, length);
  52. }
  53. inputStream.close();
  54. outputStream.flush();
  55. } catch (Exception e) {
  56. e.printStackTrace();
  57. message = "对不起,文件上传竟然失败了!!!!";
  58. }
  59. return SUCCESS;
  60. }
  61. }

还有重要的一步，配置Struts配置文件，一定要注意的是Action中result的配置contentType参数是一定要有的，否则浏览器总是提示将返回的JSON结果另存为文件，不会交给ajaxfileupload处理。这是因为struts2 JSON Plugin默认的contentType为application/json，而ajaxfileupload则要求为text/html。

Xml代码  

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
  3. <struts>
  4. <package name="struts2" extends="json-default">
  5. <action name="fileUpload" class="com.ajaxfile.action.FileAction">
  6. <result type="json" name="success">
  7. <param name="contentType">
  8. text/html
  9. </param>
  10. </result>
  11. <result type="json" name="error">
  12. <param name="contentType">
  13. text/html
  14. </param>
  15. </result>
  16. </action>
  17. </package>
  18. </struts>

Ok就是这样，要动手的同学马上Coding吧。顺便提供下JqueryAjaxFileUploader的JS文件。

JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传,布布扣,bubuko.com

时间： 2024-11-08 19:22:28

JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传的相关文章

异步文件上传组件 Uploader

Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘宝网,比如退款系统.爱逛街.二手.拍卖.我的淘宝.卖家中心.导购中心等. Uploader的特性 支持ajax.flash.iframe三种方案,兼容所有浏览器.(iframe不推荐使用) 多主题支持,可以自己定制主题 丰富的插件支持 支持多选批量上传 支持上传进度显示 支持取消上传 支持图片预览(

关于异步文件上传和文件表单元素的复制、设置和清除

一.解决文件异步上传的方法有3种:1.使用iframe 2.使用FormData(html5新功能)  3.使用flash 1.使用iframe 原来我以为使用iframe是把整个表单复制到iframe里面,然后把iframe里面的表单提交给服务器,这样来实现表单的异步上传.最后我想错了,实现原理比我想的要简单的多.先看一下代码: 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <

简单实现一个文件上传的进度条

新手初学web 文件上传做完了 进度做了 没有进度条只有文字 不太好看  需要做个进度条  没有美工 网上很多的 进度条 需要图片 还有各种框架 看着好麻烦 只好自己弄一个 还挺简单的 没想象的那么复杂  分享一下 jsp页面 <tr> <td width="100">图片</td> <td> <div style="width: 450px;"> <div class="file-box&

简单的php文件上传系统

<?php if (isset ($_GET['type'])&& $_GET['type']=="send"){ if ($_FILES['userfile']['error']==0) { /*echo 'File Name: '.$_FILES['userfile']['name'].'<br>'; echo 'File Type: '.$_FILES['userfile']['type'].'<br>'; echo 'File Si

cjhupload一个简单异步文件上传插件(html5+js)

来源:http://www.myopenresources.com/page/resource_detail_0.html?rid=370 更多文章请查看本人博客网站:http://www.myopenresources.com cjhupload是一个本人基于原生JS编写的一个文件上传插件,支持手机.电脑端,你可查看例子,或下载详细例子(请到下面的"下载地址"下载). 例子: <!DOCTYPE HTML> <html lang='zh'> <head&

【分享】兼容ie6-9和现代浏览器以及ios，android，pad等触屏设备的异步文件上传插件

核心代码 /** * 该插件用于兼容ie6-7-8-9及现代浏览器的异步上传文件. * 请注意,在ie6-7-8-9上面的原理是: * 新添加一个表单和一个iframe,然后每次选择都将file输入框复制到该表单上面,然后submit整个表单,这样就可以实现类似ajax提交文件的效果, * 但是有一点是没办法处理的,就是在客户端预览图片及判断文件大小.现代浏览器则可以. */ var AjaxFileInput=function(opts){ var settings={ container:"

一个异步文件上传的方式

不是我写的,我看了他的,思路很明确: 实现思路: 在js脚本中动态创建form,动态创建form中的内容,将文件上传的内容以隐藏域的方式提交过去,然后写好回调等. 感觉思路不难,但是我写不出来,感觉需要对于url,http有一定了解,js也ok才可. 代码: 上传的js: // JavaScript Document jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUpl

asp.net MVC4 异步文件上传

1.下载ajaxfileupload.js 2.在控制器内创建如下方法 //文件上传 public ActionResult uploadFile(HttpPostedFileBase file) { if (file == null) { return Json(new { result = "false", errorMsg="文件不存在" }, "text/html"); } string fileName = "~/Upload

简单的FileUpload文件上传

引入jar包:commons-fileupload-1.3.1.jar,commons-io-1.3.2.jar 前台HTML: <form action="./upload" method="post" enctype="multipart/form-data"> <table> <tr> <td><label>用户名:</label></td> <td&