bootstrap-fileinput - 删除附件和多个上传字段

时间:2017-01-31 15:55:00

标签: javascript php jquery twitter-bootstrap bootstrap-file-upload

我遇到了Bootstrap FileInput插件的两个问题:

  1. 我上传到“temp”文件夹以停放文件,直到提交表单,我得到一个唯一的密钥,我可以将附件和表单数据联系起来。现在的问题是,如果用户想要通过本机“垃圾”图标删除上传的文件,则上传的文件保留在“临时”文件夹中,因为未定义删除功能。如何设置“删除附件”按钮并将其指向“temp”文件夹中的附件?

  2. 我有一个带有2个标签的网页,每个标签都有一个表格供用户填写。我需要每个表单来显示fileinput插件,但在复制代码后(即使输入字段具有不同的名称),只有第一个fileinput字段正常工作,第二个文件根本不上传文件。如何在一个网页上运行多个插件实例?

  3. 输入字段+ JS:

    <h4>Attachments</h4>
    <div class="col-md-12">
    
        <input tabindex="19" id="input" name="input[]" type="file" multiple class="file-loading">
        <p class="help-block">Max. filesize 5MB, images only (.jpg || .png || .bmp)</p>
        <script>
        var $input = $("#input");
        $input.fileinput({
            uploadUrl: "./attachments/upload.php", // server upload action
            uploadExtraData: {log:'auto',holidex:'<?php echo $_SESSION['Holidex']; ?>',user:'<?php echo $_SESSION['myusername']; ?>'},
            uploadAsync: false,
            showUpload: false, // hide upload button
            showRemove: false, // hide remove button
            maxFileCount: 10,
            'maxFileSize': 5120,
            allowedFileTypes: ["image", "video"]
        }).on("filebatchselected", function(event, files) {
            // trigger upload method immediately after files are selected
            $input.fileinput("upload");
        });
        </script>
    
    </div>
    

    upload.php的

    <?php
    session_start();
    
    if(isset($_FILES['input'])) {
    
        // define variables
        $holidex = $_POST['holidex'];
        $user = $_POST['user'];
        $output_dir = "./".$holidex."/temp/".$user."/";
    
        // check whether temporary folder exists, otherwise create
        if (!file_exists($output_dir)) {
            mkdir($output_dir, 0755, true);
        }
    
        $ret = array();
    
    //  This is for custom errors;  
    /*  $custom_error= array();
        $custom_error['jquery-upload-file-error']="File already exists";
        echo json_encode($custom_error);
        die();
    */
        $error = $_FILES["input"]["error"];
        //You need to handle  both cases
        //If Any browser does not support serializing of multiple files using FormData() 
        if(!is_array($_FILES["input"]["name"])) //single file
        {
            $fileName = $_FILES["input"]["name"];
            move_uploaded_file($_FILES["input"]["tmp_name"],$output_dir.$fileName);
            $ret[]= $fileName;
        }
        else  //Multiple files, file[]
        {
          $fileCount = count($_FILES["input"]["name"]);
          for($i=0; $i < $fileCount; $i++)
          {
            $fileName = $_FILES["input"]["name"][$i];
            move_uploaded_file($_FILES["input"]["tmp_name"][$i],$output_dir.$fileName);
            $ret[]= $fileName;
          }
    
        }
        echo json_encode($ret);
    
    } else { echo "No data received."; }
     ?>
    

0 个答案:

没有答案