Fileupload+Uploadify实现上传



对于java中上传,使用fileupload是很常用的做法,很多时候把判断后缀名,限制文件大小的工作放到服务器上去做,不但耗时也耗费服务器的资源。何不把这些工作直接放到客户端就去解决,uploadify就是一个不错的解决方法,官方的demo是针对php的,不过不要紧自己动手丰衣足食。好开始改造。


一、将下载的2.1.4版本的zip包解压。新建一个eclipse项目在webcontent中新建一个uploadify文件夹,将刚解压的文件全部放入这个文件夹


二、在根目录下新建一个html页面。暂且就叫index.html,代码贴一下。

<html>
<head>
<link id="globalheader-stylesheet" rel="stylesheet" href="uploadify/uploadify.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="uploadify/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="uploadify/swfobject.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
  $('#file_upload').uploadify({
    'uploader'  : 'uploadify/uploadify.swf',
    'script'    : 'uploadify/uploadServlet.do',
    'cancelImg' : 'uploadify/cancel.png',
    'folder'    : 'uploads',
	'buttonText':'Select File...',
    'auto'      : true
  });
});
// ]]>
</script>
</head>

<body>
<input id="file_upload" type="file" name="file_upload" />
</body>
</html>

脚本中script是服务器端处理上传的程序,,这里是一个servlet,用到的FileuploadTools.java在其他文章中有自己找一下。

package com.justsy.uploaddemo.servlet;

import java.io.IOException;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileUploadBase;
import org.apache.commons.fileupload.FileUploadException;

import com.justsy.uploaddemo.util.FileUploadTools;
import com.justsy.uploaddemo.util.FileUploadTools.UploadMsg;
import com.justsy.uploaddemo.util.UnAllowedExtException;

public class UploadServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		this.doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		try {
			FileUploadTools tool = new FileUploadTools(request,300 * 1024 * 1024);
			Map<String, UploadMsg> names = tool.saveFileRandomName();

			UploadMsg msg = names.get("Filedata");
			String name = msg.getName();
			response.getWriter().write(name);
		} catch (FileUploadException e) {
			if(e instanceof FileUploadBase.IOFileUploadException){
				// 取消上传
				System.out.println("上传过程错误!!"+e.getMessage());
			}else{
				e.printStackTrace();
			}
		} catch (UnAllowedExtException e) {
			e.printStackTrace();
		}
	}

}

注意点有几个就是,不要讲uploadify的不同几个版本混合着使用,可能就高出一些乱七八糟的问题。

checkScript是指定检测上传文件夹中是否有重名的程序地址,自己可以写一个servlet搞定,

其他的需求,可以在官方的doc中找到api,并用来解决问题,官方文档地址:http://www.uploadify.com/documentation/

进行上传处理的servlet最后要返回一个值可以是上传后文件的名称,使上传进度条可以正常的结束



三、可能使用的场景

对于一个表单中有多个上传的应用可以单独选择上传后返回上传后的名称,放在隐藏域中,最后随表单一起提交,这也是一个实现无刷新上传 的方法。


好,基本的应用就想到这么多,有其他的需求对照着api,应该也可以搞定。


项目demo:http://download.csdn.net/detail/akwolf/4166204



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用Vue、Express、express-fileupload、jsonserver和Element UI来实现图片上传,并将其存放到指定位置。下面是一个简单的步骤指南: 1. 在Vue项目中安装Element UI组件库: ```bash npm install element-ui ``` 2. 创建一个Vue组件,用于实现图片上传的功能。你可以使用Element UI的上传组件: ```javascript <template> <div> <el-upload class="upload-demo" action="/api/upload" :before-upload="beforeUpload" :on-success="onSuccess" :file-list="fileList" multiple > <el-button size="small" type="primary">点击上传</el-button> </el-upload> </div> </template> <script> export default { data() { return { fileList: [] }; }, methods: { beforeUpload(file) { // 在上传之前的操作,比如限制文件类型和大小 }, onSuccess(response, file, fileList) { // 上传成功后的操作 } } }; </script> ``` 3. 在Express项目中安装express-fileupload和jsonserver: ```bash npm install express-fileupload jsonserver ``` 4. 创建一个Express路由,用于处理图片上传的请求: ```javascript const express = require('express'); const fileUpload = require('express-fileupload'); const app = express(); // 启用express-fileupload中间件 app.use(fileUpload()); // 处理图片上传的请求 app.post('/api/upload', (req, res) => { if (!req.files) { return res.status(400).send('No files were uploaded.'); } // 获取上传的文件 const sampleFile = req.files.sampleFile; // 将文件保存到指定位置 sampleFile.mv('/path/to/save/' + sampleFile.name, (err) => { if (err) { return res.status(500).send(err); } // 返回上传成功的信息 res.send('File uploaded!'); }); }); // 启动服务器 app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 5. 启动jsonserver,用于模拟数据的请求和响应: ```bash json-server --watch db.json --port 4000 ``` 6. 创建一个db.json文件,用于存储上传成功的图片信息: ```json { "images": [] } ``` 现在,你就可以在Vue应用中使用这个上传组件,并将上传成功的图片信息存储到db.json文件中了。记得将图片保存路径修改为你想要存放的指定位置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值