jquery插件——uploadify使用详解
写在前面的叫前言
刚刚参加工作,没有什么编程基础,却神奇的来到了一个叫做信息化开发室的地方。哈哈哈哈,真是#……%¥&说多了都是泪,一切都要从基础开始学起,前端后端都要弄,然而缺弄得一团乱麻。求人不如求自己,还是将学会的东西都记录下来,防止以后还不会!!!!呵呵~
来先说说jquery插件中的uploadify吧,平生第一个项目就是要建设企业微信号,确定企业脸面不会被我毁容???既然你们放心我就不客气了~。刚弄没多久就遇到了问题,上传媒体是什么鬼,根本不懂啊,好吧,只能求教了,一个神奇的插件uploadify划过了眼前,对于刚学的小白来看就是这么神奇。
同时不断的告诫不会要看文档啊文档啊,文档又是什么鬼,白白我根本看不懂好吗。费劲千辛万苦(就不多说过程了)好不容易弄明白了一点打算赶快记录下来,以一个小白的身份写一些小白才会看懂的使用说明。哈哈哈高尚吧。
很无耻的给大家推荐个文档,看不看得懂都推荐给你,看这里看这里。
uploadify安装
下载最新版本的uploadify,解压到服务器根目录下的uploadify文件夹中,你可以看到以下文件:
Change Log.txt(uploadify的升级日志,部署时删掉) check-exists.php(用来检查上传目标文件夹里是否存在相同文件) index.php(官方实例) jquery.uploadify.js(上传插件) jquery.uploadify.min.js(压缩版的上传插件,部署时使用) license.txt(许可证文件,部署时删掉) uploadify.css(上传控件样式表) uploadify.php(上传数据处理文件) uploadify.swf(flash基础文件) uploadify-cancel.png(取消按钮图片)
然后将整个uploadify(或者是其中用到的文件)导入到项目中去。
1.引用jquery库:
<script type="text/javascript" src="/uploadify/jquery.min.js"></script>
2.引用uploadify脚本
<script type="text/javascript" src="/uploadify/jquery.uploadify.min.js"></script>
3.引用uploadify样式表
<link rel="stylesheet" type="text/css" href="/uploadifyuploadify.css" />
4.其他引入(可选)
<script type="text/javascript" src="../js/json2.js"></script>
<script type="text/javascript" src="/uploadify/swfobject.js"></script>
ps:反正我公司内网进不去,也不知道网站长什么样!但我就是有!
控件与Uploadify插件绑定:
<div id="fileQueue"></div>
<input id="mediaID01" name="mediaID01" type="file" multiple="true">
<a href="javascript:$('#mediaID01').uploadify('upload','*')">上传</a>
初始化:
$(document).ready(function(){
$('#mediaID01').uploadify({
'swf' : 'uploadify/uploadify.swf',
'uploader' : 'uploadify.jsp',//后台处理的请求
'cancelImg' : 'uploadify/uploadify-cancel.png',//取消时显示的图片
'folder' : 'upload/thumbPic',//您想将文件保存到的路径
'queueID' : 'fileQueue',//与下面的id对应,上传时的动态图
// 'queueSizeLimit' : 5,
'fileDesc' : 'Image Files (*.jpg;*.jpeg;*.gif;*.png)',//选择文件时下方显示的文字提示
'fileExt' : '*.jpg;*.jpeg;*.gif;*.png', //控制可上传文件的扩展名,启用本项时需同时声明fileDesc
//'fileDesc' : '视频文件',
//'fileExt' : '*.mp4;*.rmvb;*.avi;*.flv',
'auto' : false,//
'multi' : true,
// 'simUploadLimit' : 2,
'buttonText' : '选择图片',//按钮提示文本
'buttonImg':'',
'method':'get',
'removeCompleted':false,
'fileObjName':'FileData',
'formData':{'typeName':'thumbPic'},
'onUploadStart' : function(file) {
$("#mediaID01").uploadify("settings", "typeName", "thumbPic");//settings方法重新赋值
},
'onUploadSuccess' : function(file, data, response) {
alert('文件 ' + file.name + ' 上传成功.详细信息: ' + response + ':' + data);
},
'onUploadError' : function(file, errorCode, errorMsg, errorString) {
alert(file.name + ' 上传失败。详细信息: ' + errorString);
}
});
});
</script>
后台处理js:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.io.*, java.util.*, org.apache.commons.fileupload.*" %>
<%@ page import="org.apache.commons.fileupload.disk.*, org.apache.commons.fileupload.servlet.*" %>
<%@ page import="com.ctc.wstx.util.DataUtil, java.text.SimpleDateFormat" %>
<%!
public void upload(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
Date now=new Date();
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyyMMdd");
String filePath = "/upload/thumbPic/"+dateFormat.format(now);
String path=request.getSession().getServletContext().getRealPath(filePath);
path = path+"/";
File f1 = new File(path);
System.out.println(path);
//这里接收了name的值
System.out.println(request.getParameter("name"));
if (!f1.exists()) {
f1.mkdirs();
}
DiskFileItemFactory fac = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(fac);
upload.setHeaderEncoding("utf-8");
List fileList = null;
try {
fileList = upload.parseRequest(request);
} catch (FileUploadException ex) {
return;
}
Iterator<FileItem> it = fileList.iterator();
String name = "";
String extName = "";
while (it.hasNext()) {
FileItem item = it.next();
if (!item.isFormField()) {
name = item.getName();
long size = item.getSize();
String type = item.getContentType();
System.out.println(size + " " + type);
if (name == null || name.trim().equals("")) {
continue;
}
// 扩展名格式:
if (name.lastIndexOf(".") >= 0) {
extName = name.substring(name.lastIndexOf("."));
}
File file = null;
do {
// 生成文件名:
name = String.valueOf(System.currentTimeMillis()) + (int)(Math.random()*1000000);
file = new File(path + name + extName);
} while (file.exists());
File saveFile = new File(path + name + extName);
try {
item.write(saveFile);
} catch (Exception e) {
e.printStackTrace();
}
}
}
response.getWriter().print(name + extName);
}
%>
<%
upload(request, response);
%>