uploadify组件文件上传那些事

从一个异常引起的，TypeError: $("#file_upload").uploadify is not a function，其实就是使用uploadify组件上传文件，但是一直报莫名其妙的错误。网上众说纷纭…在此记录并上传调试好的源码。

【1】uploadify组件

uploadify官网：http://www.uploadify.com/ 但是从这里下载好像付费，文章末尾会附上源码和插件下载地址。

页面源码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UploadiFive Test</title>
<link rel="stylesheet" type="text/css" href="/UeditorWeb/uploadifive.css"/>
<script type="text/javascript" src="/UeditorWeb/jquery.min.js"></script>
<script type="text/javascript" src="/UeditorWeb/jquery.uploadifive.min.js"></script>
<style type="text/css">
body {font: 13px Arial, Helvetica, Sans-serif;
}
.uploadifive-button {float: left;margin-right: 10px;
}
#queue {border: 1px solid #E5E5E5;height: 177px;overflow: auto;margin-bottom: 10px;padding: 0 3px 3px;width: 300px;
}
</style>
</head><body><form><div id="queue"></div><input id="file_upload" name="file_upload" type="file" multiple="true"><a style="position: relative; top: 8px;" href="javascript:$('#file_upload').uploadifive('upload')">Upload Files</a></form><script type="text/javascript">$(function() {$('#file_upload').uploadifive({'auto'             : false,'formData'         : {'timestamp' : '111','token'     : '111'},'queueID'          : 'queue','uploadScript'     : '/UeditorWeb/upload','onUploadComplete' : function(file, data) { console.log(data); }});});</script>
</body>
</html>

【2】修改后的Huploadify组件

页面源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="/UeditorWeb/Huploadify.css"/>
<script type="text/javascript" src="/UeditorWeb/jquery.js"></script>
<script type="text/javascript" src="/UeditorWeb/jquery.Huploadify.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){$('#upload').Huploadify({auto:true,fileTypeExts:'*.jpg;*.png;*.exe',multi:true,formData:{pid:'portal',token:'portal',filedesc:''},fileSizeLimit:9999,showUploadedPercent:true,//是否实时显示上传的百分比，如20%showUploadedSize:true,removeTimeout:9999999,uploader : '/UeditorWeb/upload',onUploadStart:function(){//alert('开始上传');},onInit:function(){//alert('初始化');},onUploadComplete:function(){//alert('上传完成');},onUploadSuccess: function(file, data, response) {alert(data);},onDelete:function(file){console.log('删除的文件：'+file);console.log(file);}});});
</script>
</head><body>
<div id="upload"></div>
</body>
</html>

每次选择文件都会直接上传，下面会有一个进度条示意。

后台对应代码

就是很常见的文件上传。

package com.web.servlet;import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.text.DecimalFormat;
import java.util.List;
import java.util.UUID;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadBase;
import org.apache.commons.fileupload.ProgressListener;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;public class FileUploadServlet extends HttpServlet {/*** */private static final long serialVersionUID = 8382832509729035231L;// private ShFileDataService shFileDataService = SpringContextHolder.getBean("shFileDataService");/*** Constructor of the object.*/public FileUploadServlet() {super();}/*** Destruction of the servlet. <br>*/public void destroy() {super.destroy(); // Just puts "destroy" string in log// Put your code here}/*** The doGet method of the servlet. <br>** This method is called when a form has its tag value method equals to get.* * @param request the request send by the client to the server* @param response the response send by the server to the client* @throws ServletException if an error occurred* @throws IOException if an error occurred*/public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request,response);}/*** The doPost method of the servlet. <br>** This method is called when a form has its tag value method equals to post.* * @param request the request send by the client to the server* @param response the response send by the server to the client* @throws ServletException if an error occurred* @throws IOException if an error occurred*/@Overridepublic void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String fileSize = "";String savePath =this.getServletContext().getRealPath("/WEB-INF/upload");String tempPath =this.getServletContext().getRealPath("/WEB-INF/temp");File tmpFile = new File(tempPath);if (!tmpFile.exists()) {tmpFile.mkdir();}String message = "";try {DiskFileItemFactory factory = new DiskFileItemFactory();factory.setSizeThreshold(1024 * 100);factory.setRepository(tmpFile);ServletFileUpload upload = new ServletFileUpload(factory);upload.setProgressListener(new ProgressListener() {public void update(long pBytesRead, long pContentLength,int arg2) {}});upload.setHeaderEncoding("UTF-8");if (!ServletFileUpload.isMultipartContent(request)) {return;}upload.setFileSizeMax(1024 * 1024 * 5);upload.setSizeMax(1024 * 1024 * 10);List<FileItem> list = upload.parseRequest(request);for (FileItem item : list) {//if (item.isFormField()) {//String name = item.getFieldName();//String value = item.getString("UTF-8");// value = new// } else {// ���fileitem�з�װ�����ϴ��ļ�String filename = item.getName();Long filesizeNum = (Long) item.getSize();if (filesizeNum > 0) {DecimalFormat df = new DecimalFormat("####.00");float size = (float) filesizeNum / 1024;fileSize = df.format(size);}if (filename == null || filename.trim().equals("")) {continue;}filename = filename.substring(filename.lastIndexOf("\\") + 1);String fileExtName = filename.substring(filename.lastIndexOf(".") + 1);InputStream in = item.getInputStream();String saveFilename = makeFileName(filename);String realSavePath = makePath(saveFilename, savePath);FileOutputStream out = new FileOutputStream(realSavePath + "\\" + saveFilename);byte buffer[] = new byte[1024];int len = 0;while ((len = in.read(buffer)) > 0) {out.write(buffer, 0, len);}out.close(); in.close();String  href = realSavePath+"\\"+saveFilename;StringBuilder resultHtml = new StringBuilder();resultHtml.append(" <li id='file_SWFUpload_5_0' style='font-size: 16px;margin-left: 25px;padding: 5px;'> ");resultHtml.append(" <span class='attch-name'>"+ filename);resultHtml.append(" <span class='attch-size'>"+ fileSize+ "KB</span><span class='attch-state' style='color:#c1c1c1'>(���)</span>");resultHtml.append(" <a style='color: #178be2' target='_blank' href='"+href+"' class='attch-dload'>����</a>");
//                      resultHtml.append(" <a style='color: #178be2' id='"+shFileData.getFileId()+"' class='attch-delete'>ɾ��</a>");resultHtml.append(" </li>");response.getWriter().write(resultHtml.toString());//}}} catch (FileUploadBase.FileSizeLimitExceededException e) {request.setAttribute("message", "the file is too big");return;} catch (FileUploadBase.SizeLimitExceededException e) {request.setAttribute("message", "the file is too big");return;} catch (Exception e) {message = "file upload fail";request.setAttribute("message", "file upload fail");}request.setAttribute("message", message);}/*** Initialization of the servlet. <br>** @throws ServletException if an error occurs*/public void init() throws ServletException {}private String makeFileName(String filename) { // 2.jpgreturn UUID.randomUUID().toString() + "_" + filename;}private String makePath(String filename, String savePath) {String dir = savePath;File file = new File(dir);if (!file.exists()) {file.mkdirs();}return dir;}
}

项目和组件下载地址

下载地址：https://download.csdn.net/download/j080624/11237740

下载内容示意：

uploadify组件文件上传那些事相关推荐

uploadify多文件上传插件
这个插件是兼容IE8及以上版本的,实现了基本功能,底部有下载连接代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiti ...
element ui upload组件文件上传一次后，不论是上传成功之后修改文件再上传还是上传失败重新上传，再次点击上传均无反应。
问题: Element UI Upload 组件文件上传一次后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应. 原因: 第一次上传文件后,浏览器还保存着我们已经上传的文 ...
vue自定义组件-文件上传后端接口
学习目标: vue自定义组件-文件上传后端接口学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...
Struts2 + uploadify 多文件上传完整的例子！
首先,我这里使用的是 Jquery Uploadify3.2版本号导入相关的CSS JS <link rel="stylesheet" type=" ...
jquery文件上传插件 uploadify java_jQuery文件上传插件Uploadify使用指南
对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持 Flash,主要特性:支持多文件上传.HTML5版本可拖拽上传.实时上传进度条显示.强大的参数定制功能,如文件大小. ...
jquery uploadify 多文件上传插件使用经验
2019独角兽企业重金招聘Python工程师标准>>> Uploadify 官网:http://www.uploadify.com/ 一.如何使用呢? 官网原文:http://www ...
隐藏vue-simple-uploader组件文件上传列表的暂停、开始等操作按钮
前段时间,针对大文件上传使用 vue-simple-uploader 实现切片上传.有同事反应,在进行计算文件md5的时候,选中的文件会处于暂停上传的状态,让人有点击继续按钮的冲动,让我将操作按钮 ...
uploadify java 下载_java uploadify 实现文件上传
1.web端使用uploadify插件下载地址:http://www.uploadify.com/wp-content/uploads/files/uploadify.zip web页面代码: 导入 ...
文件上传一些事（ie8/9下提示下载json文件）
一.通常的写法前端写法: uploader = new ptf.PUploader({url: '<c:url value="/org/orgImportDo"/>' ...
在EasyUI项目中使用FileBox控件实现文件上传处理
我在较早之前的随笔<基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用>Web框架介绍中介绍了基于Uploadify的文件上传操作,免费版本用的是J ...

uploadify组件文件上传那些事

【1】uploadify组件

【2】修改后的Huploadify组件

uploadify组件文件上传那些事相关推荐

最新文章

热门文章