How to implement client-side verification of uploaded file size in html5,

How to implement client-side verification of uploaded file size in html5, _PHP tutorial

WBOY

Release： 2016-07-12 08:52:35

Original

834 people have browsed it

html5 How to implement client-side verification of the size of uploaded files?

In HTML 5, file uploading can now be verified on the client side, such as after the user selects a file. , you can immediately verify the size and attributes of the file. This article introduces to coders how to implement client-side verification of the size of uploaded files in HTML5. Interested coders can refer to it.

In HTML 5, file uploading can now be verified on the client side. For example, after the user selects a file, the size and attributes of the file can be verified immediately. This is due to the new addition on the browser side. The ability to verify files, among which browsers that support HTML 5, will implement the file API standard implemented by W3C, which can read various information and parameters of client files.

The following example is as follows, first is HTML

<input type="file" data-file_type="zip|png" data-max_size="1000000">

Copy after login

The data-file_type attribute here specifies the file type, accepting ZIP and PNG files, separated by |, where data-max-size specifies the file size, which is 1MB here. Then use jquery to judge

$('input[type=file]').each(function()  
{  
    if(typeof $(this).attr('data-file_type') == 'string')  
    {  
        var file_types = $(this).attr('data-file_type').split('|');  
    }  
        
    var mimes = get_mimes(file_types);  
  
         //文件要求的指定大小  
    var max_size = parseInt($(this).attr('data-max_size'));  
  
    $(this).change(function(evt)  
    {  
        var finput = $(this);  
  
        var files = evt.target.files; // 获得文件对象  
  
                var output = [];  
  
        for (var i = 0, f; f = files[i]; i++)  
        {  
            //检查文件的类型是否符合指定要求  
            if(jQuery.inArray(f.type , mimes) == -1)  
            {  
                alert('File type '+ f.type + ' not allowed');  
                $(this).val('');  
                continue;  
            }  
  
            //检查文件大小  
            else if(f.size > max_size)  
            {  
                alert('Maximum file size is ' + max_size + ' bytes.');  
                $(this).val('');  
            }  
  
            //Validation ok  
            else  
            {  
                output.push('[b]', f.name, '[/b] (', f.type || 'n/a', ') - ', f.size, ' bytes, last modified: ', f.lastModifiedDate.toLocaleDateString() );  
            }  
        }  
  
        finput.after('<div>' + output.join('') + '</div>');  
    });  
});

Copy after login

In the above code, var mimes = get_mimes(file_types); is actually a method, as follows:

/* 
    Get the mimes of a list of extensions as an array 
*/  
function get_mimes(extensions)  
{  
    var mimes = [];  
    for(var i in extensions)  
    {  
        var ext = extensions[i];  
  
        if(ext in mime_types)  
        {  
            var mime = mime_types[ext];  
  
            if($.isArray(mime))  
            {  
                jQuery.merge(mimes , mime);  
            }  
            else  
            {  
                mimes.push(mime);  
            }  
        }  
    }  
  
    return mimes;  
}

Copy after login

This is actually to pass in types such as ZIP and PNG, and then return a MIME/TYPE corresponding to this type of file. For example, define a mime_types array, as follows:

var mime_types = {  
"gif":"image\/gif", 
"jpeg":["image\/jpeg","image\/pjpeg"], 
"jpg":["image\/jpeg","image\/pjpeg"], 
"jpe":["image\/jpeg","image\/pjpeg"], 
"png":["image\/png","image\/x-png"], 
.................. 
}

Copy after login

The focus is on the new file API in HTML 5, which can immediately determine the file type on the client, as follows:

var files = evt.target.files; // 获得文件对象，是一个集合，可以有多个文件 
var file_count = files.length;  //文件长度 

var file_1 = files[0]; // or files.item(0)；这里获得多个文件中的第一个文件 

var name = file_1.name; //获得文件名 
var size = file_1.size;//获得文件大小 
var type = file_1.type; //文件类型 
var lastModifiedDate = file_1.lastModifiedDate;  //文件修改时间

Copy after login

For details about HTML 5 file upload, see: http://www.w3.org/TR/file-upload/

Original address: http://www.manongjc.com/article/814.html