代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>上传插件uploadify - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="js/jconfirm/jquery-confirm.min.css" rel="stylesheet">
<link href="js/magnific-popup/magnific-popup.min.css" rel="stylesheet" type="text/css">
<link href="css/style.min.css" rel="stylesheet">
<style>
/* 因插件多了一层div，所以增加样式，如果按钮采用图片的小伙伴请忽略 */
.input-group-btn:last-child > div.uploadify > .btn {
z-index: 2;
margin-left: -1px;
}
/* 这里设定图片最大高度为110px */
.lyear-uploads-pic figure {
background-color: #fafafa;
display: flex;
justify-content: center;
align-items: center;
max-height: 110px;
min-height: 110px;
}
.lyear-uploads-pic figure img {
display: inline;
width: auto;
max-width: 100%;
max-height: 110px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="card">
<div class="card-header"><h4>上传插件 uploadify</h4></div>
<div class="card-body">
<p>Uploadify简单说来，是基于Jquery的一款文件上传插件。使用版本3.2.1，另：这里的uploadify插件是flash版本，因谷歌浏览器已默认禁用flash，所以如果使用的小伙伴需要特别注意下这点。</p>
<p>这里演示的是php的图片上传，其他类型的文件上传类似。</p>
<div class="form-group">
<label>上传图片</label>
<div class="input-group">
<input type="text" class="form-control" name="one_pic" placeholder="请输入图片URL...">
<span class="input-group-btn">
<input class="uploadify-file" id="uploadify-file-1" data-name="one_pic" data-queue="uploadqueue-1" data-multi="false" type="file">
</span>
</div>
<div id="uploadqueue-1" class="hide"></div>
</div>
<div class="form-group">
<label>上传图片2</label>
<div class="input-group">
<input type="text" class="form-control" name="two_pic" placeholder="请输入图片URL...">
<span class="input-group-btn">
<input class="uploadify-file" id="uploadify-file-2" data-name="two_pic" data-queue="uploadqueue-2" data-multi="false" type="file">
</span>
</div>
<div id="uploadqueue-2" class="hide"></div>
</div>
<div class="form-group">
<label>多图片上传</label>
<input class="uploadify-file" id="uploadify-file-3" data-name="three_pic" data-queue="uploadqueue-3" data-multi="true" type="file">
<div class="form-controls clearfix" id="three_pic">
<ul class="list-inline m-t-10 clearfix lyear-uploads-pic"></ul>
</div>
<div id="uploadqueue-3" class="hide"></div>
</div>
<div class="form-group">
<label>内容</label>
<textarea class="form-control"></textarea>
</div>
<table class="table table-bordered">
<caption><strong>一、属性</strong></caption>
<tbody>
<tr align="center">
<th>属性名称</th>
<th>默认值</th>
<th>说明</th>
</tr>
<tr>
<td><code>auto</code></td>
<td><code>true</code></td>
<td>设置为 <code>true</code> 当选择文件后就直接上传了，为 <code>false</code> 需要点击上传按钮才上传 。</td>
</tr>
<tr>
<td><code>buttonClass</code></td>
<td><code>"</code></td>
<td>按钮样式</td>
</tr>
<tr>
<td><code>buttonCursor</code></td>
<td><code>'hand'</code></td>
<td>鼠标指针悬停在按钮上的样子</td>
</tr>
<tr>
<td><code>buttonImage</code></td>
<td><code>null</code></td>
<td>浏览按钮的图片的路径 。</td>
</tr>
<tr>
<td><code>buttonText</code></td>
<td><code>'SELECT FILES'</code></td>
<td>浏览按钮的文本。</td>
</tr>
<tr>
<td><code>checkExisting</code></td>
<td><code>false</code></td>
<td>文件上传重复性检查程序，检查即将上传的文件在服务器端是否已存在，存在返回1，不存在返回0</td>
</tr>
<tr>
<td><code>debug</code></td>
<td><code>false</code></td>
<td>如果设置为true则表示启用SWFUpload的调试模式</td>
</tr>
<tr>
<td><code>fileObjName</code></td>
<td><code>'Filedata'</code></td>
<td>文件上传对象的名称，如果命名为'the_files'，PHP程序可以用$_FILES['the_files']来处理上传的文件对象。</td>
</tr>
<tr>
<td><code>fileSizeLimit</code></td>
<td><code>0</code></td>
<td>
<p>上传文件的大小限制 ，如果为整数型则表示以KB为单位的大小，如果是字符串，则可以使用(B, KB, MB, or GB)为单位，比如'2MB'；</p>
<p>如果设置为0则表示无限制</p>
</td>
</tr>
<tr>
<td><code>fileTypeDesc</code></td>
<td><code>'All Files'</code></td>
<td>这个属性值必须设置fileTypeExts属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileTypeDesc为"请选择rar doc pdf文件"</td>
</tr>
<tr>
<td><code>fileTypeExts</code></td>
<td><code>'*.*'</code></td>
<td>设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。</td>
</tr>
<tr>
<td><code>formData</code></td>
<td> </td>
<td>JSON格式上传每个文件的同时提交到服务器的额外数据，可在'onUploadStart'事件中使用'settings'方法动态设置。</td>
</tr>
<tr>
<td><code>height</code></td>
<td><code>30</code></td>
<td>设置浏览按钮的高度 ，默认值</td>
</tr>
<tr>
<td><code>itemTemplate</code></td>
<td><code>false</code></td>
<td>用于设置上传队列的HTML模版，可以使用以下标签：<br>instanceID – Uploadify实例的ID<br>fileID – 列队中此文件的ID,或者理解为此任务的ID<br>fileName – 文件的名称<br>fileSize – 当前上传文件的大小<br>插入模版标签时使用格式如：${fileName}</td>
</tr>
<tr>
<td><code>method</code></td>
<td><code>Post</code></td>
<td>提交方式Post或Get</td>
</tr>
<tr>
<td><code>multi</code></td>
<td><code>true</code></td>
<td>设置为true时可以上传多个文件。</td>
</tr>
<tr>
<td><code>overrideEvents</code></td>
<td> </td>
<td>设置哪些事件可以被重写，JSON格式，如：'overrideEvents' : ['onUploadProgress']</td>
</tr>
<tr>
<td><code>preventCaching</code></td>
<td><code>true</code></td>
<td>如果为true，则每次上传文件时自动加上一串随机字符串参数，防止URL缓存影响上传结果</td>
</tr>
<tr>
<td><code>progressData</code></td>
<td><code>'percentage'</code></td>
<td>设置上传进度显示方式，percentage显示上传百分比，speed显示上传速度</td>
</tr>
<tr>
<td><code>queueID</code></td>
<td><code>false</code></td>
<td>设置上传队列容器DOM元素的ID，如果为false则自动生成一个队列容器。</td>
</tr>
<tr>
<td><code>queueSizeLimit</code></td>
<td><code>999</code></td>
<td>队列最多显示的任务数量，如果选择的文件数量超出此限制，将会出发onSelectError事件。<br>注意此项并非最大文件上传数量，如果要限制最大上传文件数量，应设置uploadLimit。</td>
</tr>
<tr>
<td><code>removeCompleted</code></td>
<td><code>true</code></td>
<td>是否自动将已完成任务从队列中删除，如果设置为false则会一直保留此任务显示。</td>
</tr>
<tr>
<td><code>removeTimeout</code></td>
<td><code>3</code></td>
<td>如果设置了任务完成后自动从队列中移除，则可以规定从完成到被移除的时间间隔。</td>
</tr>
<tr>
<td><code>requeueErrors</code></td>
<td><code>false</code></td>
<td>如果设置为true，则单个任务上传失败后将返回错误，并重新加入任务队列上传。</td>
</tr>
<tr>
<td><code>successTimeout</code></td>
<td><code>30</code></td>
<td>文件上传成功后服务端应返回成功标志，此项设置返回结果的超时时间</td>
</tr>
<tr>
<td><code>swf</code></td>
<td><code>'uploadify.swf'</code></td>
<td>uploadify.swf 文件的相对路径。</td>
</tr>
<tr>
<td><code>uploader</code></td>
<td><code>uploadify.php</code></td>
<td>后台处理程序的相对路径。</td>
</tr>
<tr>
<td><code>uploadLimit</code></td>
<td><code>999</code></td>
<td>最大上传文件数量，如果达到或超出此限制将会触发onUploadError事件。</td>
</tr>
<tr>
<td><code>width</code></td>
<td><code>120</code></td>
<td>设置文件浏览按钮的宽度。</td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<caption><strong>二、事件</strong></caption>
<tbody>
<tr align="center">
<th>事件名称</th>
<th>说明</th>
</tr>
<tr>
<td><code>onCancel(file)</code></td>
<td>
<p>当点击文件队列中文件的关闭按钮或点击取消上传时触发，<code>file</code> 参数为被取消上传的文件对象</p>
</td>
</tr>
<tr>
<td><code>onClearQueue(queueItemCount)</code></td>
<td>当调用函数 <code>cancel</code> 方法时触发，<code>queueItemCount</code> 参数为被取消上传的文件数量。</td>
</tr>
<tr>
<td><code>onDestroy()</code></td>
<td>当 <code>destory</code> 方法被调用时触发</td>
</tr>
<tr>
<td><code>onDialogClose(queueData)</code></td>
<td>
<p>当文件浏览框关闭时触发，如果将此事件被重写，则当向队列添加文件上传出错时不会弹出错误消息提示。</p>
<p><code>queueData</code> 对象包含如下属性：</p>
<ul>
<li><code>filesSelected</code> 文件选择对话框中共选择了多少个文件</li>
<li><code>filesQueued</code> 已经向队列中添加了多少个文件</li>
<li><code>filesReplaced</code> 已经向队列中替换了多少个文件</li>
<li><code>filesCancelled</code> 取消了多少个文件 <code>filesErrored</code> 出错了多少个文件</li>
</ul>
</td>
</tr>
<tr>
<td><code>onDialogOpen()</code></td>
<td>当文件选择对话框弹出时立即出发，但可能在文件选择对话框被关闭之前并不能全部执行。</td>
</tr>
<tr>
<td><code>onDisable()</code></td>
<td>当 <code>disable</code> 方法禁用 <code>Uploadify</code> 上传按钮时被调用时触发。</td>
</tr>
<tr>
<td><code>onEnable()</code></td>
<td>当 <code>disable</code> 方法启用 <code>Uploadify</code> 上传按钮时被调用时触发。</td>
</tr>
<tr>
<td><code>onFallback()</code></td>
<td>当 <code>Uploadify</code> 初始化过程中检测到当前浏览器不支持flash时触发。</td>
</tr>
<tr>
<td><code>onInit()</code></td>
<td>首次初始化 <code>Uploadify</code> 结束时触发。</td>
</tr>
<tr>
<td><code>onQueueComplete(queueData)</code></td>
<td>
<p>文件上传队列处理完毕后触发。</p>
<p><code>queueData</code> 对象包含如下属性：</p>
<ul>
<li><code>uploadsSuccessful</code> – 上传成功的文件数量</li>
<li><code>uploadsErrored</code> – 上传失败的文件数量</li>
</ul>
</td>
</tr>
<tr>
<td><code>onSelect(file)</code></td>
<td>
<p>选择文件后向队列中添加每个上传任务时都会触发。</p>
</td>
</tr>
<tr>
<td><code>onSelectError(file, errorCode, errorMsg)</code></td>
<td>
<p>选择文件后向队列中添加每个上传任务时如果失败都会触发。</p>
<p><code>file</code> – 文件对象</p>
<p><code>errorCode</code> – 错误代码如下：</p>
<ul>
<li><code>QUEUE_LIMIT_EXCEEDED</code> – 任务数量超出队列限制；</li>
<li><code>FILE_EXCEEDS_SIZE_LIMIT</code> – 文件大小超出限制；</li>
<li><code>ZERO_BYTE_FILE</code> – 文件大小为0</li>
<li><code>INVALID_FILETYPE</code> – 文件类型不符合要求</li>
</ul>
<p><code>errorMsg</code> – 错误提示，可通过 <code>'this.queueData.errorMsg'</code> 定制</p>
</td>
</tr>
<tr>
<td><code>onSWFReady()</code></td>
<td><code>Flash</code> 文件载入成功后触发。</td>
</tr>
<tr>
<td><code>onUploadComplete(file)</code></td>
<td>每个文件上传完毕后无论成功与否都会触发。</td>
</tr>
<tr>
<td><code>onUploadError(file, errorCode, errorMsg, errorString)</code></td>
<td>文件上传出错时触发，参数由服务端程序返回。</td>
</tr>
<tr>
<td><code>onUploadProgress(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal)</code></td>
<td>
<p>处理上传队列的过程中会多次触发此事件，每当任务状态有更新时都会触发。</p>
<ul>
<li><code>file</code> – 文件对象</li>
<li><code>bytesUploaded</code> – 已上传的字节数</li>
<li><code>bytesTotal</code> – 文件总字节数</li>
<li><code>totalBytesUploaded</code> – 当前任务队列中全部文件已上传的总字节数</li>
<li><code>totalBytesTotal</code> – 当前任务队列中全部文件的总字节数</li>
</ul>
</td>
</tr>
<tr>
<td><code>onUploadStart(file)</code></td>
<td>当文件即将开始上传时立即触发</td>
</tr>
<tr>
<td><code>onUploadSuccess(file, data, response)</code></td>
<td>
<p>当文件上传成功时触发</p>
<ul>
<li><code>file</code> – 文件对象</li>
<li><code>data</code> – 服务端输出返回的信息</li>
<li><code>response</code> – 有输出时为 <code>true</code>,如果无响应为 <code>false</code>，如果返回的是 <code>false</code>，当超过 <code>successTimeout</code>设置的时间后假定为 <code>true</code></li>
</ul>
</td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<caption><strong>三、方法</strong></caption>
<tbody>
<tr align="center">
<th>方法名称</th>
<th>说明</th>
<th>应用举例</th>
</tr>
<tr>
<td><code>cancel(fileID, suppressEvent)</code></td>
<td>
<p>取消队列中的任务，不管此任务是否已经开始上传</p>
<ul>
<li><code>fileID</code> – 要取消的文件 <code>ID</code>，如果为空则取消队列中第一个任务，如果为 <code>'*'</code> 则取消所有任务</li>
<li><code>suppressEvent</code> – 是否阻止触发 <code>onUploadCancel</code> 事件，当清空队列时非常实用。</li>
</ul>
</td>
<td>
<p><code><a href="javascript:$('#file_upload').uploadify('cancel')">取消第一个</a></code></p>
<p><code><a href="javascript:$('#file_upload').uploadify('cancel', '*')">清空队列</a></code></p>
<p><code><a href="javascript:$('#file_upload').uploadify('upload', '*')">开始上传所有任务</a></code></p>
</td>
</tr>
<tr>
<td><code>destroy()</code></td>
<td>销毁 <code>Uploadify</code> 实例并将文件上传按钮恢复到原始状态</td>
<td><code><a href="javascript:$('#file_upload').uploadify('destroy')">销毁Uploadify实例</a></code></td>
</tr>
<tr>
<td><code>disable(setDisabled)</code></td>
<td>
<p>禁用或启用文件浏览按钮</p>
<p><code>setDisabled</code> – 设置为 <code>true</code> 表示禁用，<code>false</code> 为启用</p>
</td>
<td>
<p><code><a href="javascript:$('#file_upload').uploadify('disable', true)">禁用按钮</a></code></p>
<p><code><a href="javascript:$('#file_upload').uploadify('disable', false)">启用按钮</a></code></p>
</td>
</tr>
<tr>
<td><code>settings(name, value, resetObjects)</code></td>
<td>
<p>获取或设置 <code>Uploadify</code> 实例参数</p>
<ul>
<li><code>name</code> – 属性名称，如果只提供属性名称则表示获取其值</li>
<li><code>value</code> – 属性值</li>
<li><code>resetObjects</code> – 设置为 <code>true</code> 时，更新 <code>postData</code> 对象将清空现有的值。否则，新的值将被添加到其末尾。</li>
</ul>
</td>
<td>
<p><code>$('#file_upload').uploadify('settings','buttonText','BROWSE');</code></p>
<p><code>$('#file_upload').uploadify('settings','buttonText'));</code></p>
</td>
</tr>
<tr>
<td><code>stop()</code></td>
<td>停止当前正在上传的任务</td>
<td>
<p><code><a href="javascript:$('#file_upload').uploadify('upload', '*')">开始上传</a></code></p>
<p><code><a href="javascript:$('#file_upload').uploadify('stop')">停止上传</a></code></p>
</td>
</tr>
<tr>
<td><code>upload(fileID)</code></td>
<td>立即上传指定的文件，如果 <code>fileID</code> 为 <code>'*'</code> 表示上传所有文件，要指定上传多个文件，则将每个文件的 <code>fileID</code> 作为一个参数</td>
<td><code><a href="javascript:$('#file_upload').uploadify('upload','*')">开始上传</a></code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!--消息提示插件-->
<script type="text/javascript" src="js/bootstrap-notify.min.js"></script>
<!--对话框插件-->
<script type="text/javascript" src="js/jconfirm/jquery-confirm.min.js"></script>
<!--图片查看插件-->
<script type="text/javascript" src="js/magnific-popup/jquery.magnific-popup.min.js"></script>
<!--上传插件-->
<script type="text/javascript" src="js/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="js/lightyear.js"></script>
<script type="text/javascript">
// 删除图片
function delpic(idstr){
$.confirm({
title: '消息提示',
content: '您是否确定要删除该图片',
buttons: {
confirm: {
text: '确认',
action: function(){
$("#li_"+idstr).remove();
}
},
cancel: {
text: '关闭'
}
}
});
}
$(document).ready(function() {
$(".uploadify-file").each(function() {
var $this = $(this);
$this.uploadify({
//"buttonImage" : "js/uploadify/shangchuan.png", // 按钮也可直接使用图片
"buttonClass" : "btn btn-default",
"buttonText" : "上 传",
"fileTypeDesc" : "Image Files",
"fileTypeExts" : "*.gif; *.jpg; *.png; *.jpeg",
"multi" : $this.data('multi') ? true : false,
"width" : "70",
"height" : "38",
"queueID" : $this.data('queue'),
"swf" : "js/uploadify/uploadify.swf?"+Math.random(),
"uploader" : "uploadify.php",
"formData" : {key:123456,key2:'vvvv'},
"fileObjName" : 'file',
"onUploadSuccess" : function(file, data, response){
if (data) {
data = eval('(' + data + ')');
if (data['status'] == 200) {
if ($this.data('multi')) {
// 多图上传
var htmlstr = '<li id="li_'+data['filename']+'" class="col-xs-4 col-sm-3 col-md-2">' +
' <figure>' +
' <img src="'+data['url']+'" alt="'+data['filename']+'" />' +
' <figcaption>' +
' <a class="btn btn-round btn-square btn-primary btn-show" href="'+data['url']+'" title="查看"><i class="mdi mdi-eye"></i></a>' +
' <a class="btn btn-round btn-square btn-danger" href="#!" title="删除" onclick="javascript:delpic(\''+data['filename']+'\');"><i class="mdi mdi-delete"></i></a>' +
' </figcaption>' +
' </figure>' +
' <input type="hidden" name="morepic_pic['+data['filename']+']" value="'+data['url']+'"/>' +
'</li>';
$('#'+$this.data('name')).find('.lyear-uploads-pic').append(htmlstr);
// 接入图片查看插件
$('#'+$this.data('name')).magnificPopup({
delegate: 'a.btn-show',
type: 'image',
gallery: {
enabled: true
}
});
} else {
// 单图上传
$('input[name="'+ $this.data('name') +'"]').attr("value", data['url']);
}
} else {
lightyear.notify(data['msg'], 'danger', 100);
}
} else {
lightyear.notify('服务器错误，请稍后再试~', 'danger', 100);
}
},
"onQueueComplete" : function(file){
this.queueData.queueBytesUploaded = 0;
lightyear.loading('hide');
},
"onUploadStart" : function(file){
lightyear.loading('show');
},
});
});
});
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手