jQuery+php+ajax實現無重新整理上傳檔案功能
阿新 • • 發佈：2019-05-30
jQuery+php+ajax實現無重新整理上傳檔案功能，還帶有上傳進度條動畫效果，支援圖片、視訊等大檔案上傳。
js程式碼：
<script type='text/javascript' src='js/jquery-2.0.3.min.js'></script> <script type='text/javascript' src='js/jquery.form.js'></script> <script type="text/javascript"> function filesize(ele) { var filesize = (ele.files[0].size / 1024/1024).toFixed(2); $('#big').html(filesize+"MB"); $('#text').html(ele.files[0].name); } $(document).ready(function(e) { var progress = $(".progress"); var progress_bar = $(".progress-bar"); var percent = $('.percent'); $("#del").click(function(){ var objFile=document.getElementsByTagName('input')[2]; objFile.value=""; $("#list").hide(); }); $("#uploadphoto").change(function(){ $("#list").show(); }); $("#ups").click(function(){ var file = $("#uploadphoto").val(); if(file!=""){ $('#uped').html("上傳中……"); $("#myupload").ajaxSubmit({ dataType: 'json', //資料格式為json beforeSend: function() { //開始上傳 var percentVal = '0%'; progress_bar.width(percentVal); percent.html(percentVal); }, uploadProgress: function(event, position, total, percentComplete) { var percentVal = percentComplete + '%'; //獲得進度 progress_bar.width(percentVal); //上傳進度條寬度變寬 percent.html(percentVal); //顯示上傳進度百分比 }, success: function(data) { if(data.status == 1){ var src = data.url; $('#uped').html("上傳成功"); //var attstr= '<img src="'+src+'">'; //$(".imglist").append(attstr); //$(".res").html("上傳圖片"+data.name+"成功，圖片大小："+data.size+"K,檔案地址："+data.url); }else{ $(".res").html(data.content); } }, error:function(xhr){ //上傳失敗 alert("上傳失敗"); } }); } else{ alert("請選擇視訊檔案"); } }); }); </script>
upload.php原始碼：
<?php
$picname = $_FILES['uploadfile']['name'];
$picsize = $_FILES['uploadfile']['size'];
if ($picname != "") {
if ($picsize > 201400000) { //限制上傳大小
echo '{"status":0,"content":"圖片大小不能超過2M"}';
exit;
}
$type = strstr($picname, '.'); //限制上傳格式
if ($type != ".gif" && $type != ".jpg" && $type != "png" && $type != ".mp4"&& $type != ".rar") {
echo '{"status":2,"content":"檔案格式不對！"}';
exit;
}
$rand = rand(100, 999);
$pics = uniqid() . $type; //命名圖片名稱
//上傳路徑
$pic_path = "images/". $pics;
move_uploaded_file($_FILES['uploadfile']['tmp_name'], $pic_path);
$myfile = fopen("1/".date("His")."testfile.txt", "w");
}
$size = round($picsize/1024,2); //轉換成kb
echo '{"status":1,"name":"'.$picname.'","url":"'.$pic_path.'","size":"'.$size.'","content":"上傳成功"}';
?>