javascript - Comment JS front-end encapsule-t-il une méthode ou un plug-in jQuery pour permettre de cliquer sur un bouton pour ouvrir le système de gestion de fichiers local et télécharger des fichiers?
天蓬老师
天蓬老师 2017-05-16 13:36:56
0
3
745

Pour exécuter un événement après avoir cliqué sur un bouton, ouvrez le système de gestion de fichiers local, puis sélectionnez le fichier, puis sélectionnez télécharger

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

répondre à tous(3)
世界只因有你

Une méthode encapsulée il y a quelque temps, utilisant les méthodes ajax et formData pour implémenter le téléchargement de fichiers et afficher la progression du téléchargement pendant le processus de téléchargement

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 n'est pas écrit par moi)

<?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文件夹中
    
漂亮男人

Je viens de rencontrer un problème avec le téléchargement d'images sur le front-end il y a deux jours. Cet article est mon dossier. Voyez si cela aide. Portail

洪涛

Vous pouvez utiliser <input type="file" /> pour y parvenir, puis modifier le style de saisie via CSS

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!