uploadify多文件上传插件
生活随笔
收集整理的這篇文章主要介紹了
uploadify多文件上传插件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這個插件是兼容IE8及以上版本的，實現了基本功能，底部有下載連接
代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>uploadify多文件上傳插件使用</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<link rel="stylesheet" type="text/css" href="js/uploadfiy/uploadify.css"/>
<style type="text/css">
#fileQueue {
background_color: #FFF;
border_radius: 3px;
/* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); */
border:1px solid #95B8E7;
/* box-shadow: 0 1px 3px rgba(135, 175, 255, 1); */
height: 220px;
margin-bottom: 10px;
overflow: auto;
/* padding: 5px 10px; */
width: 395px;
}
</style>
<!--這個js是經過修改的，可以兼容IE8及以上的版本-->
<script type="text/javascript" src="js/uploadfiy/jquery.uploadify.js"></script>
<script type="text/javascript">
$(document).ready(function() {
initFile();
});
function initFile() {
$("#uploadify").uploadify({
'uploader': 'FileUpLoadServlet',//后臺處理的頁面
'swf' : './js/uploadfiy/uploadify.swf',
'script' : '',
'width':80,
'height':23,
'folder' : '../upload',
'buttonText' : '選擇文件',
'fileExt' : '*.*', //允許上傳的文件格式
'queueID' : 'fileQueue',
'auto' : false, //需要手動的提交申請
'simUploadLimit':3, //同時運行上傳的進程數
'queueSizeLimit':10,//
'multi' : true
//'scriptData':{'dept':'dept1','group':'group1'}, //這個參數必須要設置成method為get，
//'method':'get' //后臺用request.getParameter('name')獲取名字的值
});
}
//用戶取消函數
function funCancel(event, ID, fileObj, data) {
alert('您取消了' + fileObj.name + '操作', 'info');
return;
}
//圖片上傳發生的事件
function funComplete(event, ID, fileObj, response, data) {
//$("#pic").html('<img id="pic" runat="server" src=../upload/' + response + '.jpg style="width:300;height:200px;"/>');
if (response == 0) {
jBox.tip('圖片' + fileObj.name + '操作失敗', 'info');
return;
}
$("#pic").attr("src", "../upload/" + response).height(200).width(300);
jBox.tip('圖片' + fileObj.name + '操作成功', 'info');
return;
}
//上傳發生錯誤時。
function funError(event, ID, fileObj, errorObj) {
jBox.tip(errorObj.info);
return;
}
</script>
</head>
<body style="background-color:white;">
<div id="maindiv" style="margin:0 auto;width:100%; text-align:center;border:1px solid #95b8e7; background-color:#F3F3F3;">
<div id="filecollection" style=" width:420px;margin:0 auto;text-align:left; margin-top:30px;margin-bottom:50px;">
<input type="file" name="uploadify" id="uploadify" />
<div id="fileQueue"></div>
<p style="font-size:12px;">
<a href="javascript:$('#uploadify').uploadify('upload','*')">上傳</a>| <a
href="javascript:$('#uploadify').uploadify('cancel','*')">取消上傳</a>
</p>
</div>
</div>
</body>
</html> 代碼下載連接：http://download.csdn.net/detail/zhzhjieke/8411193
轉載于:https://www.cnblogs.com/zhzhjieke/p/4263099.html
總結
以上是生活随笔為你收集整理的uploadify多文件上传插件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 移植YAFFS2文件系统到linux3.
- 下一篇： android activity生命周期