Swf Upload使用
1.页面
引入 script以及css
<!-- 以下 为 上传的实现 -->
<link href="scripts/swfupload/css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/swfupload/js/swfupload.js"></script>
<script type="text/javascript" src="scripts/swfupload/js/swfupload.queue.js"></script>
<script type="text/javascript" src="scripts/swfupload/js/fileprogress.js"></script>
<script type="text/javascript" src="scripts/swfupload/js/handlers.js"></script>
创建 swf upload相关函数
<script type="text/javascript">
function uploadSuccess(file, serverData) {
try {
var progress = new FileProgress(file, this.customSettings.progressTarget);
progress.setComplete();
progress.setStatus("Complete.");
progress.toggleCancel(false);
$("#address").val(serverData);
} catch (ex) {
this.debug(ex);
}
}
var swfu;
window.onload = function() {
var settings = {
flash_url : "scripts/swfupload/js/swfupload.swf",
upload_url: "fileUpload_upload.action",
// 上传到服务器的补充参数
post_params: {"type" : "resource"},
//上传文件的名称
file_post_name: "file",
file_size_limit : "100 MB",
file_types : "*.doc;*.wps;*.swf;*.pdf;",
file_types_description : "请输入*.doc;*.wps;*.swf;*.pdf;格式",
file_upload_limit : 1,
file_queue_limit : 0,
custom_settings : {
progressTarget : "fsUploadProgress",
cancelButtonId : "btnCancel"
},
debug: false,
// Button settings
button_image_url: "../images/TestImageNoText_65x29.png",
button_width: "65",
button_height: "29",
button_placeholder_id: "spanButtonPlaceHolder",
button_text: '<span class="theFont">上传</span>',
button_text_style: ".theFont { font-size: 16; }",
button_text_left_padding: 12,
button_text_top_padding: 3,
// The event handler functions are defined in handlers.js
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
queue_complete_handler : queueComplete// Queue plugin event
};
swfu = new SWFUpload(settings);
};
</script>
页面元素
<input type="hidden" id="address" name="address" value="${entity.address}"/>
<div class="fieldset flash" id="fsUploadProgress">
<span class="legend">上传队列</span>
</div>
<div id="divStatus">0 Files Uploaded</div>
<div>
<span id="spanButtonPlaceHolder"></span> <input id="btnCancel"
type="button" value="取消"
onclick="swfu.cancelQueue();" disabled="disabled"
style="margin-left: 2px; font-size: 8pt; height: 29px;width:80px;" />
</div>
2. action
private String type;
private File file;
private String fileFileName;
private String fileContentType;
public void upload() throws Exception {
// 实现上传
InputStream is = new FileInputStream(file);
//String root = ServletActionContext.getServletContext().getRealPath("/resources/resources");
String root = ServletActionContext.getServletContext().getRealPath(getPath());
// 定义保存的文件名
String fileName=fileFileName.substring(0,fileFileName.lastIndexOf("."));
String suffix=fileFileName.substring(fileFileName.lastIndexOf("."));
String outputName=fileName+DateUtils.date2String(null, null)+suffix;
File deskFile = new File(root, outputName);
OutputStream os = new FileOutputStream(deskFile);
//写数据
byte[] bytefer = new byte[1024];
int length = 0;
while ((length = is.read(bytefer)) != -1) {
os.write(bytefer, 0, length);
}
HttpServletResponse response =ServletActionContext.getResponse();
response.setContentType("application/json;charset=UTF-8");
PrintWriter printWriter = response.getWriter();
// 给出 上传文件的地址
//printWriter.print(gson.toJson("resources/resources/"+outputName));
printWriter.print((getPath().substring(1)+"/"+outputName));
printWriter.flush();
printWriter.close();
os.close();
is.close();
}
private String getPath(){
String path = null;
if(type.equals("user")){
path="/resources/icon/user";
}else if(type.equals("course")){
path="/resources/icon/course";
}else if(type.equals("resource")){
path="/resources/resources";
}
return path;
}
自定义上传：
页面定义：
<!-- style="display: none;" -->
<form action="course/course_upload.action" method="post"
style="display: none;" id="upload" enctype="multipart/form-data">
<input type="file" onchange="showUpload();" id="execeFile"
name="execeFile" />
</form>
function showUpload() {
if ($("#execeFile").val() != null) {
$("#upload").submit();
}
}
按钮点击后调用
$("#execeFile").click();