利用點空閑時間來寫個博客，最近做的項目中需要表單提交音頻的，圖片的，各種類型，把它存到數據庫里，這里先來說一下音樂文件的表單提交吧，后幾天再來更新輸入數據庫的，先看一下效果
點擊瀏覽
就會出來預覽，點擊mp3的文件
打開播放也可以正常播放
再來換一張圖片，試試能不能傳上
提交張圖片
點擊提交
提交不成功，因為這個只允許MP3格式的文件提交
剛才還沒看mp3的提交，下面提交一下MP3文件
點擊提交
因為沒有給它設置跳轉頁面，所以還在它的處理頁面
和圖片上傳的原理是一樣的，圖片上傳在我的前幾篇博客中有，一樣得需要在自己的目錄下新建一個文件夾
而提交的內容都得存入這個文件夾中
看一下里面有沒有剛才我們提交的MP3文件
運行成功
如果再提交一遍的話還會有
點擊提交
看一下文件夾里
依然有。
下面來看一下我們這個的源代碼
先來看主頁面的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> </head> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <body> <div class="box_input" style="margin-bottom: 20px;"> <form action="shiyancl.php" method="post" style="width: 960px;" enctype="multipart/form-data"> <input id="test" style="display: inline-block;" type="file" name="file"/> <audio id="audio" controls autoplay="" style="display: none; "></audio> <input type="submit" id="mp3_submit" style="display: none;margin-left: 25px;" type="button" value="提交"/> </form> </div> </body> <script> //錄音上傳 $(function () { $("#test").change(function () { var objUrl = getObjectURL(this.files[0]); $("#audio").attr("src", objUrl); $("#audio")[0].pause(); $("#audio").show(); $("#mp3_submit").show() getTime(); }); }); <!--獲取mp3文件的時間 兼容瀏覽器--> function getTime() { setTimeout(function () { var duration = $("#audio")[0].duration; if(isNaN(duration)){ getTime(); } else{ console.info("該歌曲的總時間為："+$("#audio")[0].duration+"秒") } }, 10); } <!--把文件轉換成可讀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; } </script> </html>
再來看它的提交頁面的代碼 文件名是shiyancl.php
<?php //var_dump($_FILES["file"]); //索引寫它的name值 //判斷文件上傳是否出錯 if($_FILES["file"]["error"]) { echo $_FILES["file"]["error"]; } else { //控制上傳文件類型 if(($_FILES["file"]["type"]=="audio/mpeg" || $_FILES["file"]["type"]=="mp3/mp3") && $_FILES["file"]["size"]<500000) { //找到文件存放的位置 $filename = "./file/".date("YmdHis").$_FILES["file"]["name"]; //加 . 拼接 //轉換編碼格式 $filename = iconv("UTF-8","gb2312",$filename); //判斷文件是否存在 if(file_exists($filename)) { echo "該文件已存在！"; } else { //保存文件 move_uploaded_file($_FILES["file"]["tmp_name"],$filename); //移動上傳文件 } } else { echo "文件類型不正確"; } }
再寫之前可以用var_dump輸出一下你要提交的東西
它就會給你返會數據類型什么的
有些東西可以根據這個改
等我把其他功能做出來會繼續上傳的，希望會對大家有所幫助