uploadify插件实现文件上传

最新推荐文章于 2019-11-26 14:41:25 发布

sky_Wolf丶

最新推荐文章于 2019-11-26 14:41:25 发布

阅读量189

点赞数

分类专栏： JAVASCRIPT

本文链接：https://blog.csdn.net/qq_35605231/article/details/79899231

版权

JAVASCRIPT 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

最近在做文件上传功能中，使用到了uploadify插件，简单记录一下。

· 依赖 jquery.min.js

· 注意 谷歌浏览器需开启flash(此坑已踩实)。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>world</title>
<script type="text/javascript" src="uploadify/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>
</head>
<body>
	<input id="uploadify" type="file"style="width:2em;height:1em;"/>
	<input id="photo" type="text"style='width=400px'/>
	<div id='queue'></div>
	<div style="width:200px;height:400px">
		<img id="pic"/>
	</div>
	<input type='button' id='up' value='上传'/>
</body>
<script type="text/javascript">
$(function(){
	var SERVICE_FILE_URL='http://localhost:7710/';
	var filename = '';
	$('#uploadify').uploadify(
			{
				'queueID' : 'queue',//上传文件展示区，
				'swf' : 'uploadify/uploadify.swf',//固定写法
				'uploader' : SERVICE_FILE_URL + 'upload?pathParam=spzz/test/',//文件服务器地址
				//'buttonImage' : 'uploadify/uploadify-cancel.png',
				'width' : 102,
				'height' : 40,
				'fileTypeDesc' : '图片文件',//上传文件类型描述
				//'fileSizeLimit' : '200KB',//限制文件大小
				'buttonText' : '选择可视图片',
				'formData' : {},//提交参数
				'method' : 'post',//固定写法
				'auto':false,  //是否自动上传
				'multi': false, //是否多文件上传
				'fileTypeExts' : '*.jpg;*.png;*.jpeg;*.bmp;*.mp4', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
				'onUploadSuccess' : function(file, data, response) {//上传成功的事件描述，比如：文件预览等动作。 
					$('#photo').val(filename += data);
					
					$("#pic").attr(
							"src",
							SERVICE_FILE_URL + "download/?pathParam=spzz/test/"
									+ encodeURI(data));
				},
				'onUploadError' : function(file, errorCode, errorMsg,
						errorString) {
					$.messager.alert('系统提示',errorMsg+errorString,'info');
				}
			});
	$('#up').click(function(){
		$('#uploadify').uploadify('upload','*');
		//$('#uploadify').uploadify('upload');//提交队列中第一个文件        
        //$('#uploadify').uploadify('cancel','*');  //取消上传队列
	});
});
</script>
</html>

sky_Wolf丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
uploadify插件实现文件上传

最近在做文件上传功能中，使用到了uploadify插件，简单记录一下。 · 依赖 jquery.min.js · 注意谷歌浏览器需开启flash(此坑已踩实)。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;world&lt;/title&gt;&amp
复制链接

扫一扫

专栏目录