uploadify（dwz中使用的上傳插件）使用方法

時間 2020-02-12

標籤 uploadify dwz 使用上傳插件使用方法欄目 JQuery 简体版

原文原文鏈接

先是html代碼: javascript

<%@ page language="java" import="java.util.*"  pageEncoding="utf-8"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上傳客戶端軟件</title>


<script type="text/javascript">
 $(document).ready(function(){
 		//初始化uploadify 用於word上傳
						$("#doc_upload").uploadify({
											'swf' : '/js/uploadify/uploadify.swf',//上傳的flash文件,必用
											'uploader' : '/upload.action;jsessionid=<%=request.getSession().hashCode()%>',//上傳的請求URL
											//'script' : '/upload.action',
											'method' : "post",//請求方式
											//'folder' : 'upload',//設置上傳文件夾
											'cancelImage' : '/js/uploadify/uploadify-cancel.png',//設置取消的圖片
											'displayData' : 'speed',//進度條的顯示方式
											'fileObjName' : 'file',//與後臺Action中file屬性同樣
											'formData' : {
												'folder' : '/upload/soft'
											},//附帶值，參數
											'queueID' : 'doc_pb',//進度條ID
											'auto' : true,//自動上傳
											'multi' : false,//是否爲多文件上傳
											'buttonImage':'/images/upload.png',
											'button Text' : " 瀏 覽 ",
											'uploadLimit' : 1,//一次能夠上傳多少個文件
											'fileSizeLimit' : '100000KB',//單個文件上傳最大值
											'queueSizeLimit' : 1,//最多上傳個數
											successTimeout : 99999,//上傳超時時間
											'fileTypeDesc' : '支持格式:*.exe',//提示上傳格式
											'fileTypeExts' : '*.exe',//限制上傳文件格式
											'rollover' : true,
											'removeCompleted' : false,//上傳完成後是否自動隱藏進度條
											//'debug' : true,
											progressData : "percentage",//顯示上傳的百分比
											//上傳到服務器，服務器返回相應信息到data裏
											onUploadSuccess : function(file,//每一個文件上傳完成後都會調用一次，其中data爲，相應信息，file爲上傳文件信息,response只有兩個值true or false
													data, response) {
												//alert(response);
												//alert(file);
												//alert(data);
												$("#doc_path").val(data);
											},
											//選擇文件時出錯
											onSelectError : function(file,
													errorCode, errorMsg) {
												alert(errorMsg);
											},
											onError : function(errorObj) {
												alert(errorObj.info
														+ "               "
														+ errorObj.type);
											}
										});
					});
					
	function navTabAjaxDone(json){
       	 //DWZ.ajaxDone(json);
     	 if (json.statusCode == DWZ.statusCode.ok){
            if ("queryData"){ //把指定navTab頁面標記爲須要「從新載入」。注意navTabId不能是當前navTab頁面的
                  navTab.reloadFlag("lastestVersion");
            } else { //從新載入當前navTab頁面
                  navTabPageBreak();
            }
            if ("closeCurrent" == json.callbackType) {
                  setTimeout(function(){navTab.closeCurrentTab();}, 100);
            } else if ("forward" == json.callbackType) {
                  navTab.reload(json.forwardUrl);
            }
      }
}
</script>
</head>
<body>
	<form enctype="multipart/form-data" action="/updateVersion" method="post" class="pageForm required-validate" onsubmit="return validateCallback(this, navTabAjaxDone);">
	<input id="doc_path"  name="path"  type="hidden" >
	<div class="pageFormContent nowrap" layoutH="56">
		<dl><dt>版&nbsp;&nbsp;本&nbsp;&nbsp;號：</dt><dd><input name="versionNum"  type="text"  class="required"></dd></dl>
		<dl><dt>上傳軟件：</dt><dd><input type="file" name="doc" id="doc_upload"  >
		<div id="doc_pb"></div></dd></dl>
			<div class="formBar" style="margin-top: 600px">
				<ul>
					<!--<li><a class="buttonActive" href="javascript:;"><span>保存</span></a></li>-->
					<li><div class="buttonActive">
							<div class="buttonContent">
								<button type="submit">保存</button>
							</div>
						</div></li>
					<li>
						<div class="button">
							<div class="buttonContent">
								<button type="button" class="close">取消</button>
							</div>
						</div>
					</li>
				</ul>
			</div>
	</div>
	</form>
</body>
</html>

而後是後臺的action，這裏只提供的action對應的方法

  /** 文件 **/  private File file; html

  /** 文件名 **/  private String fileFileName; java

  /** 文件類型 **/  private String fileContentType; ajax

  /** 文件保存路徑 **/  private String folder; json
/**
	 * 上傳文件
	 * 
	 * @return
	 */
	public String upload() {
		// System.out.println(TransUtil.getSha1(file));
		
		String realPath = ServletActionContext.getServletContext().getRealPath(
				folder);// 獲取文件保存物理路徑
		if (file != null) {
			final String saveName = TransUtil.renameFileName(realPath,
					fileFileName.replaceAll(" ", "_"));
			final File saveFile = new File(new File(realPath), saveName);
			if (!saveFile.getParentFile().exists()) {
				saveFile.getParentFile().mkdirs();
			}
			
				try {
					// System.out.println("有沒有通過這裏?");
					FileUtils.copyFile(file, saveFile);
					
					HttpServletResponse response = ServletActionContext
							.getResponse();
					response.setCharacterEncoding("UTF-8");
					response.getWriter().write(folder + "/" + saveName);// 返回文件地址
					// System.out.println(TransUtil.getSha1(saveFile));
				} catch (IOException e) {
					e.printStackTrace();
					System.out.println("上傳文件失敗");
				}
			
		}

		return null;
	}