`
eric.zhang
  • 浏览: 124045 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Jquery uploadify实现文件上传 flash方式

 
阅读更多

使用 Jquery的插件 uploadify 实现文件的上传,可显示上传进度。。。以下是需要用到的文件:
uploadify.css
jquery.uploadify.v2.1.4.js
swfobject.js

代码如下:

$(document).ready(function(){
		
		//设置Flash上传图片的
		$("#uploadify").uploadify({
			'uploader':'${ctx}/scripts/dwz/uploadify/scripts/uploadify.swf',
			'script':'${ctx}/fileupload/doUpload.json',
			'cancelImg':'${ctx}/scripts/dwz/uploadify/cancel.png',
			'folder':'/uploadFiles',
			'queueID':'fileQueue',
			'auto':false,
			'multi':true,
			'fileExt':'*.jpg;*.gif;*.png;*.JGP;*.GIF;*.PNG',
			'fileDesc':'所有*.jpg;*.gif;*.png文件',
			'buttonText':'browse',
			'displayData':'percentage',
			'onComplete':function(event,queueId,fileObj,response,data){
				var temp = eval("("+response+")");
				var tpxwTem = $("#tpxw").val();
				//显示上传完成的图片
				$("#fileQueue").append('<div name="picDiv" id="'+queueId+'" class="'+temp.successFileName+'"><input type="hidden" name="tpxw" value="'+temp.successFileName+'"><input type="text"  name="ymc" value="'+fileObj.name+'"/><span style="cursor: pointer;">&nbsp;&nbsp;&nbsp;&nbsp;<font color="red">删除</font></span><br/></div>');
				$("input[name='ymc']").attr("readonly","readonly").attr("size","65").attr("class","textInput readonly");
			}
		});
		//给每个上传完成的图片 添加删除事件
		$("div[name='picDiv'] span").live("click",function(){
				deleteUploadFile($(this).parent().attr("id"),$(this).parent().attr("class"));
		});
		//处理上传图片
		$("#doUploadButton").bind("click",function(){
			$('#uploadify').uploadifyUpload();
		})
		
		
	});
	//点击删除上传成功的图片
	function deleteUploadFile(t_queueID,fileName){
		var parameters = new Object();
		parameters["filePath"]=fileName;
		parameters["divId"]=t_queueID;
		parameters["fileFolder"]="uploadFiles";
		$.post("${ctx}/fileupload/deleteFile.json",parameters,function(data){
			if(data["message"]=='success'){	
				var tempid=data["divId"];
				$("#"+tempid).remove();
			}
		},"json");
	}


<tr>
				<td colspan="3"><center>
					<div id="showMessDiv"></div>
					<p id="uploadInfoWhenComplete" style="line-height:15px;color:#bd0a01;display:none;font-size:12px;"></p>
					<div id="fileUploadDiv" style="display: none;">
						<div id="fileQueue" class="fileQueue">
						</div>
						<input type="file" id="uploadify" name="uploadify" />
						<p><br><button id="doUploadButton" onclick="return false;">上传图片</button>
						</p>	
					</div></center>
						
				</td>
			</tr>
			<tr id="uploadMessageTr" style="display: none;"><td colspan="3"><center><font color="red">提示 : 图片大小不能超过1M</font></center></td></tr>
			<tr><td colspan="3">&nbsp;</td></tr>
			<tr>
				<td colspan="3">
					<center>
					<input type="submit" onclick="return checkSubmit();" value="保存"><input type="button" class="close" value="关闭">
					</center>
				</td>
			</tr>




  • 大小: 41 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics