HTML

1
2
3
4
5
<form id="form">
    <input type="file" name="file" id="file">
    <progress value="0" max="100"></progress>
    <input type="button" id="button" value="点击文件上传">
</form>

JQUERY

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$('#button').click(function(){
    var data=new FormData($('#form')[0]);
    $.ajax({
        url:'test.php',
        data:data,
        type:'post',
        xhr: function(){
            myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){
                myXhr.upload.addEventListener('progress',progressFunc, false);
            }
            return myXhr;
        },
        success:function(data){
            alert(data);
        },
        processData: false,
        contentType: false
    })
})

function progressFunc(e) {
    if (e.lengthComputable) {
        var percentComplete=e.loaded/e.total*100;
        $('progress').attr('value',percentComplete);
    }
}

PHP

1
2
3
4
5
6
7
$name=iconv("UTF-8","gb2312",$_FILES["file"]["name"]);//解决文件名乱码
$result=move_uploaded_file($_FILES["file"]["tmp_name"],$name);
if($result){
    echo '上传文件成功';
}else{
    echo '上传文件失败';
}

最后更新： 2024年04月12日 02:44

原始链接： https://xiaguochang.github.io/posts/ad3385d8/