如何设置使用PHP，jquery和AJAX限制最大文件 [英] How to set to limit the maximum files using PHP, jquery and AJAX

问题描述

我正在尝试Jquery文件上传

I am trying out Jquery File Upload

<input type="file" name="listingfiles[]" class="file" multiple>

此上传选项提供多个文件上传选项。但我想让它只上传3个。如何设置使用PHP，jQuery和AJAX限制（仅3个文件）最大文件。我用了4个文件



我尝试了什么：



< b> HTML文件

This upload option give many file upload option . But i want to make it only 3 to upload multiple .How i set to limit (only 3 file ) the maximum files using PHP, jQuery and AJAX. I have use 4 file

What I have tried:

HTML FILE

<div class="filediv">
       <input type="file" name="listingfiles[]" class="file" multiple min="1" max="3">
    </div>

JAVA代码

JAVA CODE

if (jQuery("input[name='listingfiles[]']").length){
        var lpcount = 0;
        jQuery.each(jQuery("input[name='listingfiles[]']"), function(k, files) {
            jQuery.each(jQuery("input[name='listingfiles[]']")[k].files, function(i, file) {
                if(file.size > 1 || file.fileSize > 1) {
                    fd.append('listingfiles[' + lpcount + ']', file);
                    lpcount++;
                }
            });
        });
    }

AJAX代码

AJAX CODE

jQuery(document).ready(function($){

'use-strict';

var abc = 1;      // Declaring and defining global increment variable.
$(document).ready(function() {
    if(jQuery('.lp-img-gall-upload-section').length > 0){

        $('body').on('change', '.file', function(event) {
            var files = event.target.files; //FileList object
            var output = document.getElementsByClassName("filediv");
            output = output[0];

            for(var i = 0; i< files.length; i++)
            {
                var file = files[i];
                //Only pics
                if(!file.type.match('image'))
                    continue;

                var picReader = new FileReader();

                picReader.addEventListener("load",function(event){

                    var picFile = event.target;

                    var div = document.createElement("ul");
                    div.className = 'jFiler-items-list jFiler-items-grid grid'+i;
                    div.innerHTML = '<li class="jFiler-item">\
                                    <div class="jFiler-item-container">\
                                        <div class="jFiler-item-inner">\
                                            <div class="jFiler-item-thumb">\
                                                 <img  class="thumbnail" src="'+ picFile.result +'" title="' + picFile.name + '"/>\
                                            </div>\
                                        </div>\
                                    </div><a class="icon-jfi-trash jFiler-item-trash-action"></a>\
                                </li>';

                    output.insertBefore(div,null);
                });
                //Read the image
                picReader.readAsDataURL(file);
            }
            $('.jFiler-item-trash-action').on('click',function() {
                $(this).parent().parent().parent().remove();
            });
            $(output).find('input').hide();
            $(output).before($("<div/>", {
                class: 'filediv'
            }).fadeIn('slow').append($("<input/>", {
                name: 'listingfiles[]',
                type: 'file',
                class: 'file',
                multiple: 'multiple'
            })));
        });
        // To Preview Image
        function imageIsLoaded(e) {
            $('#previewimg' + abc).attr('src', e.target.result);
        };
    }
});
});

PHP代码

PHP CODE

if ( isset($_FILES["listingfiles"]) ) {
    if($_FILES['listingfiles']['size'] != 0) {
        $files = $_FILES["listingfiles"];           
        //$files2 = $_FILES["lp-featuredimage"];            
        foreach ($files['name'] as $key => $value) {                            
            if ($files['name'][$key]) {
                $file = array( 'name' => $files['name'][$key],                      
                'type' => $files['type'][$key],                         
                'tmp_name' => $files['tmp_name'][$key],                         
                'error' => $files['error'][$key],                       
                'size' => $files['size'][$key] );                   
                $_FILES = array ("listingfiles" => $file);                  
                $count = 0;                 
                foreach ($_FILES as $file => $array) {  

                    if( $featImgFromGal==true && !isset($_FILES["lp-featuredimage"]) ){
                        $newupload = listingpro_handle_attachment($file,$postID,$set_thu=true);
                    }else{
                        $newupload = listingpro_handle_attachment($file,$postID,$set_thu=false);
                    }                                                       
                    $ids[] =$newupload;
                    $count++;
                }
            }
        }
        if(!empty($ids) && is_array($ids)){
            $img_ids = implode(",", $ids);              
            update_post_meta($postID, 'gallery_image_ids', $img_ids);
            //$_FILES['lp-featuredimage'] = $files2;

        }
    }                                   
}

关于我如何设置限制的任何建议，仅限3个文件？

Any suggestions on how I set the limit , 3 file only?

推荐答案

）{

'used-strict';

var abc = 1; //声明和定义全局增量变量。

){ 'use-strict'; var abc = 1; // Declaring and defining global increment variable.

（document）.ready（function（）{
if（jQuery（'。lp-img-gall-upload-section' ）。length> 0）{

(document).ready(function() { if(jQuery('.lp-img-gall-upload-section').length > 0){

（'body'）。on（'change'，'。file'，function（event）{
var files = event。 target.files; // FileList对象
var output = document.getElementsByClassName（filediv）;
output = output [0];

for（var i = 0; i< files.length; i ++）
{
var file = files [i];
//只有pics
if（！file.type.match（'image'） ）
继续;

var picReader = new FileReader（）;

picReader.addEventListener（load，function（event）{

var picFile = event.target;

var div = document.createElement（ul）;
div.class Name ='jFiler-items-list jFiler-items-grid grid'+ i;
div.innerHTML ='< li class =jFiler-item> \
< div class =jFiler-item-container> \
< div class =jFiler-item-inner> \
< div class =jFiler-item-thumb> \
< img class =thumbnailsrc ='+ picFile.result +'title ='+ picFile.name +'/> \
< / div> \
< / div> \
< / div>< a class =icon-jfi-trash jFiler-item-trash-action> < / a> \
< /立GT;';

output.insertBefore（div，null）;
}）;
//读取图片
picReader.readAsDataURL（file）;
}

('body').on('change', '.file', function(event) { var files = event.target.files; //FileList object var output = document.getElementsByClassName("filediv"); output = output[0]; for(var i = 0; i< files.length; i++) { var file = files[i]; //Only pics if(!file.type.match('image')) continue; var picReader = new FileReader(); picReader.addEventListener("load",function(event){ var picFile = event.target; var div = document.createElement("ul"); div.className = 'jFiler-items-list jFiler-items-grid grid'+i; div.innerHTML = '<li class="jFiler-item">\ <div class="jFiler-item-container">\ <div class="jFiler-item-inner">\ <div class="jFiler-item-thumb">\ <img class="thumbnail" src="'+ picFile.result +'" title="' + picFile.name + '"/>\ </div>\ </div>\ </div><a class="icon-jfi-trash jFiler-item-trash-action"></a>\ </li>'; output.insertBefore(div,null); }); //Read the image picReader.readAsDataURL(file); }

这篇关于如何设置使用PHP，jquery和AJAX限制最大文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！