當(dāng)前位置：
首頁 >
js多文件上传
發(fā)布時(shí)間：2025/6/17
32
豆豆
一、HTML
選擇文件的時(shí)候可以選擇多個(gè)文件，這個(gè)需要我們?cè)趇nput file 里面加入一個(gè)屬性multiple="multiple" 這樣就可以框選文件了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>多文件上傳</title> </head><body> <div style="text-align:center;margin:100px"><input type="file" id="file" name="file" multiple="multiple"><button onclick="xhr2()">多文件上傳</button> </div> </body> </html>二、JS
下面使用到的知識(shí)參考自：
http://www.cnblogs.com/snowinmay/archive/2013/07/17/3195072.html
http://www.jb51.net/article/89998.htm
https://my.oschina.net/u/1866405/blog/335987
//多文件上傳函數(shù) function xhr2(){var xhr = new XMLHttpRequest();//第一步//定義表單變量var file = document.getElementById('file').files;//console.log(file.length);//新建一個(gè)FormData對(duì)象var formData = new FormData(); //++++++++++//追加文件數(shù)據(jù)for(i=0;i<file.length;i++){ formData.append("file["+i+"]", file[i]); //++++++++++ } //formData.append("file", file[0]); //++++++++++//post方式xhr.open('POST', '2.php'); //第二步驟//發(fā)送請(qǐng)求xhr.send(formData); //第三步驟//ajax返回xhr.onreadystatechange = function(){ //第四步if ( xhr.readyState == 4 && xhr.status == 200 ) {console.log( xhr.responseText );//打印數(shù)據(jù)到控制臺(tái) }};//設(shè)置超時(shí)時(shí)間xhr.timeout = 100000;xhr.ontimeout = function(event){alert('請(qǐng)求超時(shí)！');} }三、PHP
這里就是簡(jiǎn)單的接收文件和移動(dòng)文件
if($_POST){print_r($_FILES["file"]); for($i=0;$i<count($_FILES["file"]['name']);$i++){$name=$_FILES["file"]["name"][$i];move_uploaded_file($_FILES["file"]["tmp_name"][$i],iconv("UTF-8","gb2312",$name));} }?
轉(zhuǎn)載于:https://www.cnblogs.com/phpyangbo/p/6148327.html
總結(jié)
- 上一篇： 【java】定时器
- 下一篇： 关于子网划分—为什么全0全1子网号不能使