代碼
<html>
<head>
<title>大容通文件上傳</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/catalog/view/javascript/jquery/jquery.js"></script>
<style>
*{
font-family: arial,verdana,helvetica,'PingFang SC','HanHei SC',STHeitiSC-Light,Microsoft Yahei,sans-serif;
margin: 0px;
padding: 0px;
border: 0px;
}
.uploader{
position:relative;
display:inline-block;
overflow:hidden;
cursor:default;
padding:0;
margin:10px 0px;
-moz-box-shadow:0px 0px 5px #ddd;
-webkit-box-shadow:0px 0px 5px #ddd;
box-shadow:0px 0px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.filename{
float:left;
display:inline-block;
outline:0 none;
height:32px;
width:180px;
margin:0;
padding:8px 10px;
overflow:hidden;
cursor:default;
border:1px solid;
border-right:0;
font:9pt/100% Arial, Helvetica, sans-serif; color:#777;
text-shadow:1px 1px 0px #fff;
text-overflow:ellipsis;
white-space:nowrap;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-radius:5px 0px 0px 5px;
border-radius:5px 0px 0px 5px;
background:#f5f5f5;
background:-moz-linear-gradient(top, #fafafa 0%, #eee 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#f5f5f5));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f5f5f5',GradientType=0);
border-color:#ccc;
-moz-box-shadow:0px 0px 1px #fff inset;
-webkit-box-shadow:0px 0px 1px #fff inset;
box-shadow:0px 0px 1px #fff inset;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.button{
float:left;
height:32px;
display:inline-block;
outline:0 none;
padding:8px 12px;
margin:0;
cursor:pointer;
border:1px solid;
font:bold 9pt/100% Arial, Helvetica, sans-serif;
-moz-border-radius:0px 5px 5px 0px;
-webkit-border-radius:0px 5px 5px 0px;
border-radius:0px 5px 5px 0px;
-moz-box-shadow:0px 0px 1px #fff inset;
-webkit-box-shadow:0px 0px 1px #fff inset;
box-shadow:0px 0px 1px #fff inset;
}
.uploader input[type=file]{
position:absolute;
top:0; right:0; bottom:0;
border:0;
padding:0; margin:0;
height:30px;
cursor:pointer;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity:0;
}
input[type=button]::-moz-focus-inner{padding:0; border:0 none; -moz-box-sizing:content-box;}
input[type=button]::-webkit-focus-inner{padding:0; border:0 none; -webkit-box-sizing:content-box;}
input[type=text]::-moz-focus-inner{padding:0; border:0 none; -moz-box-sizing:content-box;}
input[type=text]::-webkit-focus-inner{padding:0; border:0 none; -webkit-box-sizing:content-box;}
.uploader{
margin: 200px auto 0px;
width: 260px;
display: block;
}
.picList{
margin:80px auto;
width:1200px;
overflow: hidden;
}
ul li{
list-style:none;
width:200px;
height:200px;
float:left;
margin-left:33px;
margin-top:33px;
}
li img{
width:100%;
}
.fixR{
display: block;
position: fixed;
width:80px;
height:80px;
top:50px;
right:100px;
border-radius: 45px;
overflow: hidden;
}
.dBox{
width:100%;
padding-bottom:200px;
}
.fixR1{
display: block;
position: fixed;
width: 120px;
height: 50px;
top: 280px;
right: 100px;
border-radius: 45px;
overflow: hidden;
text-align: center;
font-size: 30px;
background-color: #43e230;
line-height: 50px;
color: white;
cursor:pointer;
}
</style>
</head>
<body>
<img class="fixR" src="<?php echo $data['head_pic']?>" title="<?php echo $data['nick_name']?>" alt="<?php $data['nick_name']?>">
<div class="fixR1">提交</div>
<div class="dBox">
<form action="http://darongtong.local/index.php?route=pc/pcimuser/uploads" method="post" enctype="multipart/form-data" class="upload">
<div class="uploader white">
<input type="text" class="filename" readonly="readonly"/>
<input type="button" name="file" class="button" value="Browse..."/>
<input type="file" name="fname[]" id="fUpload" multiple size="30"/>
<!-- fname[] 這里上傳的是一個文件集 php使用$_FILES 接收 -->
</div>
</form>
<ul id="ulList"></ul>
<ul class="picList">
<!-- <li><img src="http://www.darongtong.cn/img/3_1.jpg" alt="" title=""></li> -->
</ul>
</div>
</body>
</html>
<script>
$(function() {
//提交表單
$('.fixR1').click(function() {
$('form.upload').submit();
});
});
//建立一個可存取到該file的url 獲取上傳文件地址的方法
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
//循環獲取文件數據
$("#fUpload").on('change', function () {
$(".picList").empty();
var fp = $("#fUpload");
var lg = fp[0].files.length; // get length
var items = fp[0].files;
var fragment = "";
if (lg > 0) {
for (var i = 0; i < lg; i++) {
var fileName = items[i].name; // get file name 文件名字
var fileSize = items[i].size; // get file size 文件大小 byte
var fileType = items[i].type; // get file type 文件類型
var fileUrl = getObjectURL(items[i]); //獲取文件地址
is_url = 1;
switch(fileType) {
case 'image/jpeg':
case 'image/png':
case 'image/jpg':
//圖片
picName = '1_1';
is_url = 2;
break;
case 'application/pdf':
//pdf
picName = '1_2';
break;
case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
//word
picName = '1_3';
break;
case 'application/msword':
// word 2003
picName = '1_4';
break;
case 'application/vnd.ms-excel':
//xls工作表
picName = '1_5';
break;
case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
//xlsx工作表97
picName = '1_6';
break;
case 'application/vnd.ms-powerpoint':
// Microsoft PowerPoint 97-2003
picName = '1_7';
break;
case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
//Microsoft PowerPoint 2007 幻燈片
picName = '1_8';
break;
case 'text/plain':
// 文本文檔 txt
picName = '2_1';
break;
}
if(is_url == 1) {
fragment += '<li><img src="http://www.darongtong.cn/img/'+ picName +'.jpg" alt="' + fileName + '" title="' + fileName + '"></li>';
} else {
fragment += '<li><img src="' + fileUrl + '" alt="' + fileName + '" title="' + fileName + '"></li>';
}
}
$(".picList").append(fragment);
}
});
</script>
