input file 樣式美化
<html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<a href="javascript:;" class="fileStyle">File Upload
<input type="file" id="ajaxUpload" style="width:50%">
</a>
<style>
.fileStyle {
position: relative;
display: inline-block;
background: #28bdb7;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: white;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.fileStyle input {
position: absolute;
font-size: 100px;
right: 0;top: 0;
opacity: 0;
}
.fileStyle:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
.commAlertMask {
width: 100%;
height: 100%;
background: rgba(0,0,0,0.1);
position: fixed;
top: 0;
right: 0;
z-index: 100;
}
.commAlertMask .commMaskBox{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
background: #fff;
min-width: 400px;
max-width: 90%;
max-height: 90%;
overflow: auto;
-webkit-box-shadow: 0 0 25px #666;
box-shadow: 0 0 25px #666;
padding: 30px;
}
.commAlertMask .commMaskBox .commMaskClose{
position: absolute;
top: 5px;
right: 10px;
height: 24px;
width: 24px;
cursor: pointer;
opacity: .5;
-webkit-transition: opacity .3s linear;
-o-transition: opacity .3s linear;
transition: opacity .3s linear;
}
.commMaskBox .commMaskClose i{
font-size: 24px;
font-weight: bold;
}
.commMaskBox .commMaskClose:hover{
opacity: 1;
}
</style>
<script>
function LoadingStart(LoadText){
var loadingHidder = null;
loadingHidder = "<div class='commLoading' style='background: rgba(0,0,0,0.1); width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;'><div style='background: #fff;position: absolute;top: 50%;left: 50%; transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);padding: 30px 50px 20px;border-radius: 5px;line-height: 20px;box-sizing: border-box;text-align: center;'><img src='https://www.buruyouni.com/static/upload/images/loading.gif' style='width: 35px;display: block;margin: 0 auto 15px;' /><span>" + LoadText + "<span></div></div>";
$("body").css("overflow","hidden").append(loadingHidder);
}
function LoadingEnd(){
$("body").css("overflow","");
$(".commLoading").remove();
}
function commAlert(ALERTINNERHTML){
var alertHTML = "";
alertHTML += "<div class='commAlertMask'><div class='commMaskBox'><div class='commMaskClose'><i style='font-size:22px;font-style:normal'>x</i></div><div className='commAlertCont'>" + ALERTINNERHTML + "</div></div></div>";
$("body").append(alertHTML);
$(".commAlertMask .commMaskClose").click(function(){
$(".commAlertMask").remove();
});
}
/**
* 當文件上傳的input改變內容的時候上傳文件
*/
$('#ajaxUpload').change(function(){
LoadingStart("uploading...");
var data = new FormData();
data.append('myfile',$(this).get(0).files[0]);//獲取當前的input的files,後臺接收的時候name是"myfile"
//data.append('isUploadImage','1');//可自己增加的選項
/* ajax上傳部分
$.ajax({
url:'/ajaxUploadFile',//你的上傳方法
type:'POST',
data:data,
cache: false,//選項必填
contentType: false,//選項必填
processData: false,//選項必填
success:function(data){
console.log(data);
if(data.url){
$("#business_license").val(data.url);
$("#business_license_img").css('display','inline-block');
$("#business_license_img").attr('src',data.url);
}
LoadingEnd();
},
error:function(){
LoadingEnd();
commAlert("Upload failed, please try again");
}
});
*/
setTimeout(function(){
LoadingEnd();
commAlert("上傳成功...");
},2000);
});
</script>
<!--
//php服務端文件上傳方法
public function ajaxUploadFile(){
header('Content-Type:application/json');
$path = 'image/catalog/image/';
$file = "";
if (!is_dir($path)) {
@mkdir($path, 0755);
}
if(is_dir($path)){
if(isset($_FILES['myfile']['name'])) {
$allowed_file=array('gif','png','jpg','pdf','doc','docx','jpeg');
$filename = basename(preg_replace('/[^a-zA-Z0-9\.\-\s+]/', '', html_entity_decode($_FILES['myfile']['name'], ENT_QUOTES, 'UTF-8')));
$extension = pathinfo($filename, PATHINFO_EXTENSION);
if($filename != '') {
if($_FILES['myfile']['size']>1024*1024*5){//limit 5M
echo json_encode(array('url'=>'','msg'=>'file size is over 5MB'));exit();
}
if(in_array($extension,$allowed_file) ) {
$file = time().'-'.$filename;
$directory = $path;
$fileNameAndPath = $directory.$file;
move_uploaded_file($_FILES['myfile']['tmp_name'], $fileNameAndPath);
echo json_encode(array('url'=>$directory.'/'.$file,'msg'=>'upload success'));
}else{
echo json_encode(array('url'=>'','msg'=>'notAllow','notAllow'=>'not allow file'));
}
}else{
echo json_encode(array('url'=>'','msg'=>'upload error','notAllow'=>''));
}
}else{
echo json_encode(array('url'=>'','msg'=>'upload error','notAllow'=>''));
}
}
}
-->
</html>