文章詳情頁(yè)

javascript - 前端js如何封裝一個(gè)方法或者是jQuery的插件實(shí)現(xiàn)點(diǎn)擊一個(gè)按鈕打開(kāi)本地文件管理系統(tǒng)，進(jìn)行上傳文件

瀏覽：123日期：2023-09-17 16:21:54

問(wèn)題描述

一個(gè)按鈕點(diǎn)擊后執(zhí)行一個(gè)事件的方式，打開(kāi)本地文件管理系統(tǒng)，然后選中文件，然后選中上傳

問(wèn)題解答

回答1：

前段時(shí)間封裝的一個(gè)方法,使用ajax和formData方法,實(shí)現(xiàn)文件上傳，在上傳的過(guò)程中顯示上傳進(jìn)度

$(’#upload’).on(’click’,function(){ var xhr = new XMLHttpRequest(); xhr.open(’post’,’../PHP/post_file.php’,true); // 獲取上傳進(jìn)度 xhr.upload.onprogress = (ev)=>{var scale = Math.round( (ev.loaded/ev.total)*100 );$(’.text’).html( scale + ’%’);$(’.progress’).css(’width’, scale + ’%’); }; xhr.onload = ()=>{console.log(’上傳成功’); }; // 通過(guò)file表單的files屬性拿到文件數(shù)據(jù) 通過(guò)formData將數(shù)據(jù)轉(zhuǎn)換為二進(jìn)制格式 var fileInfo = new FormData(); fileInfo.append( ’file’,$(’#iptFile’)[0].files[0] ); // 發(fā)送數(shù)據(jù) xhr.send(fileInfo);});

html

css

.box{ position: relative; width: 400px; height: 50px; border:1px solid #000; margin-top:30px;}.progress{ width: 0%; height: 100%; background-color: red;}.text{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center;}

php (php非本人所寫(xiě))

<?phpheader(’Content-type:text/html; charset='utf-8'’);$upload_dir = ’uploads/’;if(strtolower($_SERVER[’REQUEST_METHOD’]) != ’post’){ exit_status(array(’code’=>1,’msg’=>’錯(cuò)誤提交方式’));}if(array_key_exists(’file’,$_FILES) && $_FILES[’file’][’error’] == 0 ){$pic = $_FILES[’file’];if(move_uploaded_file($pic[’tmp_name’], $upload_dir.$pic[’name’])){exit_status(array(’code’=>0,’msg’=>’上傳成功’,’url’=>$upload_dir.$pic[’name’])); } }echo $_FILES[’file’][’error’];exit_status(array(’code’=>1,’msg’=>’出現(xiàn)了一些錯(cuò)誤’));function exit_status($str){ echo json_encode($str); exit;}?>需要在服務(wù)器環(huán)境下運(yùn)行，我用的是wamp,上傳的文件會(huì)存到和php同級(jí)下的uploads文件夾中回答2：

前兩天剛好遇到前端上傳圖片的問(wèn)題，這個(gè)文章是我的記錄，你看看有沒(méi)有幫助。傳送門(mén)

回答3：

可以使用<input type='file' />來(lái)實(shí)現(xiàn)，然后通過(guò)css改變input的樣式就可以了