javascript - Bagaimanakah js bahagian hadapan merangkum kaedah atau pemalam jQuery untuk membolehkan mengklik butang untuk membuka sistem pengurusan fail tempatan dan memuat naik fail?

Question

Untuk melaksanakan acara selepas mengklik butang, buka sistem pengurusan fail setempat, kemudian pilih fail, dan kemudian pilih muat naik

Answer 1

Kaedah yang dirangkumkan beberapa waktu lalu, menggunakan kaedah ajax dan formData untuk melaksanakan muat naik fail dan memaparkan kemajuan muat naik semasa proses muat naik

js

       $('#upload').on('click',function(){

            var xhr = new XMLHttpRequest();

            xhr.open('post','../PHP/post_file.php',true);

            // 获取上传进度
            xhr.upload.onprogress = (ev)=>{
                var scale = Math.round( (ev.loaded/ev.total)*100 );
                $('.text').html( scale + '%');
                $('.progress').css('width', scale + '%');
            };

            xhr.onload = ()=>{
                console.log('上传成功');
            };

            // 通过file表单的files属性拿到文件数据 通过formData将数据转换为二进制格式
            var fileInfo = new FormData();
            fileInfo.append( 'file',$('#iptFile')[0].files[0] );

            // 发送数据
            xhr.send(fileInfo);

        });

html

    <form action="">
        <input type="file" id="iptFile">
        <input type="button" id="upload" value="点击上传"/>
    </form>

    <p class="box">
        <p class="progress"></p>
        <p class="text">
            0%
        </p>
    </p>

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 bukan saya yang tulis)

<?php
header('Content-type:text/html; charset="utf-8"');
$upload_dir = 'uploads/';

if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
    exit_status(array('code'=>1,'msg'=>'错误提交方式'));
}

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'=>'出现了一些错误'));

function exit_status($str){
    echo json_encode($str);
    exit;
}
?>


需要在服务器环境下运行，我用的是wamp,上传的文件会存到和php同级下的uploads文件夹中
    

Answer 2

Saya baru sahaja menghadapi masalah dengan memuat naik imej di bahagian hadapan dua hari lalu. Portal

Answer 3

Anda boleh menggunakan <input type="file" /> untuk mencapai ini, dan kemudian menukar gaya input melalui css