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

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"> 

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>');  
    });  
});  

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;  
}  

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"], 
.................. 
} 

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;  //文件修改时间 

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

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

Related reading:

File upload via Resumable HTML5 File API

HTML5 solution to resume/upload large files at breakpoints

How to upload large files using php combined with html5

html5 slice/chunk/split upload very large files

http://www.bkjia.com/PHPjc/1126420.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/1126420.htmlTechArticlehtml5 How to implement client-side verification of the size of uploaded files. In HTML 5, file uploads can now be performed on the client The verification is done immediately. For example, after the user selects a file, it can be verified immediately...