在Web网页中开发上传文件功能

Question

在Web网页中上传文件分为两种方式，一种是通过普通的表单上传，另外一种是通过Ajax上传，表单上传相对简单，但是提交的时候会自动刷新网页，而Ajax上传相对表单上传要复杂些，但是上传的时候不用上传网页，可以有效的减少网络传输量，本文就这两种方式给大家介绍下网页中的文件上传。

表单上传

表单上传是最简单的上传文件方式，我们只需要按部就班的编写的表单即可，注意上传文件的表单必须设置 enctype 为 multipart/form-data 类型，然后添加我们的文件域，如果你想要多文件上传，那么可以给文本域添加 multiple="multiple" 属性。

<form method="post" enctype="multipart/form-data">
    <input type="file" name="upload_media" class="upload_media" multiple="multiple" />
    <button type="submit" class="btn btn-info">上传文件</button>
</form>

如果你想限制用户可以选择文件的格式，只需要添加 accept="image/gif,image/png" 即可。

前端验证文件

HTML5给我们带来了新的File API，我们可以通过JavaScript很直观的获取用户选择文件的一些信息，比如文件名、文件大小和文件的格式，借由这些属性我们可以限制一些不合法的文件上传。

我们可以给文本域绑定一个事件，当其值发生改变的时候，我们验证用户选择的文件是否合法。

注意：File API目前来说获取的属性只能读取，不能修改！

$(function(){
    $('.upload_media').change(function(){
        var files = $(this)[0].files;
        for(var i = 0, f; f = files[i]; i++){
            if(f.type == 'image/png' || f.type == 'image/gif' || f.type == 'image/jpg' || f.type == 'image/jpeg'){
                if(f.size < 2*1024*1024){
                    //如果需要自动提交表单，可以使用下面的这行代码，否者就等到用户点击按钮再上传文件
                    //$('.upload_media').parent().submit();
                }else{
                    alert(f.name + '文件超出上传大小限制！');
                }
            }else{
                alert(f.name + '不是图片！');
            }
    })
})

服务端处理

我这里以PHP位置，为大家讲解下PHP中，如何处理前端上传的文件。

首先我们要判断前端是否上传了文件，使用$_FILES变量来判断，虽然前端验证了文件的格式，但是后端也要验证文件的类型是否是我们允许的，其次我们还要验证文件的大小是否是我们允许的大小，最后移动文件到我们的上传目录，更新数据库即可。

if($_FILES['upload_media']){
    $file = $_FILES['upload_media'];
    $tmpname = $file['tmp_name'];
    if(is_uploaded_file($tmpname)){
        if($file['error'] == 0){
            if($file['type'] == "image/jpeg" || $file['type'] == "image/jpg" || $file['type'] == "image/png" || $file['type'] == "image/gif"){
                if($file['size'] < 1024*1024){
                    
                    //获取文件名和文件扩展名
                    $file_info = pathinfo($file["name"]);

                    //移动文件
                    $move = move_uploaded_file($tmpname, 'upload/avatar/upload_media'.$file_info['extension']);
                    
                    if($move){
                        $suc = '上传成功！';
                        //更新数据库
                    }else{
                        $err = '上传失败！';
                    }
                }else{
                    $err = '文件太大！';
                }
            }else{
                $err = '文件格式错误！';
            }
        }else{
            $err = '文件上传失败！';
        }
    }
}

Ajax上传文件

上面介绍了表单上传，确实比较简单，但是会刷新网页，很多人可能想开发一种无刷新上传文件的功能，那么我们可以使用XMLHttpRequest上传文件。

Ajax的方式上传文件我们可以做很多事情，比如文件上传的进度、文件上传的速度和上传剩余时间等，实现的难度也是比较大的，不过带来的用户体验却非常好。

这里我们就不需要编写表单了，我们需要一个文本域即可，先给文本域绑定一个 change() 事件，回调函数中我们验证文件的合法性。

1、先验证客户端是否支持File Api

if(window.File && window.FileList && window.FileReader && window.Blob){
    $('.pop_media_put_input').change(function(){
        fileSelect();
    })
}else{
    alert('您的浏览器不支持File Api');
}

2、用户选择文件以后，显示待上传的文件列表

function fileSelect(){
    var files = $('.pop_media_put_input')[0].files;

    for(var i = 0, f; f = files[i]; i++){
        if(f.type == 'image/png' || f.type == 'image/gif' || f.type == 'image/jpg' || f.type == 'image/jpeg'){
            $('<div class="pop_media_put_item file_'+i+'">'+
            '<h4>'+f.name+'</h4>'+
            '<div class="pop_media_put_pro">'+
                '<a href="javascript:" class="pull-right">取消</a>'+
                '<div class="pop_media_put_bg"><div class="pop_media_put_line"></div></div>'+
            '</div>'+
            '<p>等待上传中……</p>'+
            '</div>').appendTo('.pop_media_put_list');
            
            UploadFile(f,i);
            
        }else{
            alert('文件不是图片！');
        }
    }
}

3、开始上传文件，显示上传的进度

// upload JPEG files
function UploadFile(file, index) {

    var xhr = new XMLHttpRequest();

    // progress bar
    xhr.upload.addEventListener("progress", function(e) {
        var pc = parseInt(e.loaded / e.total * 100);
        $('.file_'+index).find('.pop_media_put_line').css('width', (pc+1)+'%');
        $('.file_'+index).find('p').html('<span>已上传：'+e.loaded+'/'+e.total+'</span>');
    }, false);

    // file received/failed
    xhr.onreadystatechange = function(e) {
        if (xhr.readyState == 4) {
            $('.file_'+index).find('.pop_media_put_pro').remove();
            $('.file_'+index).find('p').html('恭喜您，已上传成功！');
            $('.file_'+index).addClass('pop_media_put_success');
            $('.file_'+index).find('h4').html($('.file_'+index).find('h4').html() + ' <i class="fa fa-check"></i>')
        }
    };

    // start upload
    xhr.open("POST", 'http://127.0.0.1', true);
    xhr.setRequestHeader("X_FILENAME", file.name);
    xhr.send(file);

}

在服务端文件的接收和表单上传基本一致，这里就不做过多的演示了。