在Web网页中开发上传文件功能 - 文章教程

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

发布于 2017-06-07 字数 6391 浏览 6870 评论 0

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

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

表单上传

表单上传是最简单的上传文件方式,我们只需要按部就班的编写的表单即可,注意上传文件的表单必须设置 enctypemultipart/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);

}

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0