导航：首页 > 网络技术 >

jquery uploadify的使用

发表于：2024-11-26 作者：热门IT资讯网编辑

编辑最后更新 2024年11月26日，由于项目是存储图片的，要使用到上传的功能，而且个人想做好点。所以在网上搜了下资料，觉得这个jquery 的插件还不错。首先放个工程的分布图项目是拿以前搭建好的SSH的框架，不过里面只用到struts2

由于项目是存储图片的，要使用到上传的功能，而且个人想做好点。所以在网上搜了下资料，觉得这个jquery 的插件还不错。

首先放个工程的分布图

项目是拿以前搭建好的SSH的框架，不过里面只用到struts2。

用到的jar的话大家自己去下载吧。jquery uploadify的版本是2.1.4的。

index.jsp下面的代码是

>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":"
+ request.getServerPort() + path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>首页title>
style>
<script type="text/javascript" src="js/jquery-1.6.js">script>
<script type="text/javascript" src="uploadify/jquery.uploadify.v2.1.4.js">script>
<script type="text/javascript" src="uploadify/swfobject.js">script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
<script type="text/javascript">
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader' : 'uploadify/uploadify.swf', //flash，上传时的显示
'script' : 'show.action', //提交处理的地址，默认是php的
'fileDataName' : 'file', //在处理的地址接收的名字
'cancelImg' : 'uploadify/cancel.png', //上传时的取消按钮
'folder' : '/p_w_picpath', //上传放到服务器的哪个路径，（一开始的时候可以的，但是后来不知道修改了什么就在后台也要加上这个文件夹了，那样这个属性就没意思了）
'queueID' : 'upLoadDiv', //显示附件在哪个DIV
'fileDesc' : '图片文件', //选择文件的最后一个框框显示的提示
'fileExt' : '*.jpg;*.png;*.bmp', //只允许什么类型的文件上传
'sizeLimit' : 1024*1024*1, //上传文件的大小byte单位的如果是在struts2上面用的话，要在struts.xml里面加上<constant name="struts.multipart.maxSize" value="9999999999999999">constant>
'queueSizeLimit' : 2, //最多可以选择多少个文件
'auto' : false, //自动上传
'multi' : true, //多文件上传
'simUploadLimit' : 2, //一次上传多少个文件
'buttonText' : 'BROWSE', //上传的button文字
// 'scriptData' :{'name':'xxx','id':'sss'}, //参数json类型
//'method' :'get', //提交方法类型，默认post，有参数就要get
'onError' :function(event,queueID,fileObj,errorObj){
//一般这个的话会在上传上来文件的那个div上显示，但出来的错误是英文的
alert("文件:"+fileObj.name+"上传失败!失败的原因是:"+errorObj.type);
},
'onAllComplete' :function(event,data){//ajax返回，所有文件上传之后的回调
alert("一共上传："+data.filesUploaded+"个文件,错误数："+data.errors+".上传速度："+data.speed+"kb/s");
}
});
});
script>
head>
<body>
<div id="upLoadDiv">div>
<input type="file" name="uploadify" id="uploadify" /> <br><br>
<a href="_javascript:$('#uploadify').uploadifyUpload()">上传a>
<a href="_javascript:$('#uploadify').uploadifyClearQueue()">取消所有上传a>
body>
html>

struts.xml里面的代码挺少的

struts2默认文件上传的大小是2M，大于2M的上传不了。所以我们要设置一下。

xml version="1.0" encoding="UTF-8" ?>
>
<struts>
<constant name="struts.multipart.maxSize" value="9999999999999999">constant>
<package name="default" extends="struts-default" namespace="/">
<action name="show" class="com.mark.action.Show" method="uploadImg">
action>
package>
struts>

Action类里面的代码：

导包的话大家自己导吧。

public class Show {
private File file; // 前台传过来的文件
private String fileFileName; // 文件名
private String fileContentType; // 文件类型
public void uploadImg() throws IOException {
HttpServletResponse response = ServletActionContext.getResponse();
HttpServletRequest request = ServletActionContext.getRequest();
// 写到服务器上
response.setCharacterEncoding("utf-8");
try {
String path = request.getRealPath("/p_w_picpath");
FileInputStream in = new FileInputStream(file);
FileOutputStream out = new FileOutputStream(new File(path + "/" + fileFileName));
byte[] b = new byte[1024];
while ((in.read(b) > -1)) {
out.write(b);
}
in.close();
out.close();
response.getWriter().write("上传成功！");
}catch (Exception e) {
e.printStackTrace();
response.getWriter().write("上传失败!请联系管理员或者重新上传！");
}
}
public File getFile() {
return file;
}
public void setFile(File file) {
this.file = file;
}
public String getFileFileName() {
return fileFileName;
}
public void setFileFileName(String fileFileName) {
this.fileFileName = fileFileName;
}
public String getFileContentType() {
return fileContentType;
}
public void setFileContentType(String fileContentType) {
this.fileContentType = fileContentType;
}
}

最后发个成品的图片

有什么错误的地方请大家指点一下，共同成长！

很赞哦！

jquery uploadify的使用

相关文章