FineUploader: can I use addFiles() from the JQuery wrapper?

问题

I'd like to add a second upload button that exclusively invokes the camera on an iOS device.

Per the recent blog post I understand this can be done using the addFiles() method. However my project is currently using the JQuery version of FineUploader. Can I access addFiles() from the JQuery version or should I switch to the Vanilla JS version?

回答1:

You can access any API methods when using the jQuery plug-in. Using addFiles as an example:

$('#myUploader').fineUploader('addFiles', filesOrInputs);

filesOrInputs can be a File, an <input type="file"> or an array (or array-like structure) of either.

See the "Using the jQuery plug-in" readme or the for more details.

回答2:

I have implemented this solution:

<body>

<div id="restricted-fine-uploader"></div>


<div id="cameraButtonContainer" class="qq-upload-button" style="position: relative; direction: ltr;">
  <div>or click here</div>
  <input id="cameraButton" type="file" name="camera" accept="image/*;capture=camera" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"
  onchange="$('#restricted-fine-uploader').fineUploader('addFiles', this); ">
</div>


<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {

$("#restricted-fine-uploader").fineUploader({
      request: {
        endpoint: "janka/upload"
      },
      deleteFile: {
        enabled: true,
        forceConfirm: true,
        endpoint: "janka/delete"
      },
      chunking: {
        enabled: true
      },
      resume: {
          enabled: true
      },
      multiple: true,
      element: document.getElementById("restricted-fine-uploader"),
      validation: {
        allowedExtensions: ["jpeg", "jpg", "png"],
        sizeLimit: 5 * 1024 * 1024 // 5 MB
      },

      text: {
        uploadButton: "Drop image here"
      },
      showMessage: function(message) {
        $("#restricted-fine-uploader").append("<div class=\"alert alert-error\">" + message + "</div>");
      },
      failedUploadTextDisplay: {
        mode: "custom",
        maxChars: 40,
        responseProperty: "error",
        enableTooltip: true
      }
    }).on("complete", function(event, id, fileName, responseJSON) {
      if (responseJSON.success) {
        $(this).append("<img src=\"/js/fine-uploader/processing.gif\" alt=\"" + fileName + "\">");
      }
    });


$("#breadcrumbs").xBreadcrumbs({});
});
/*]]>*/
</script>
</body>

回答3:

I use fileUploader in basic mode, so:

HTML code:

<input type="file" id="btInput" name="btInput"><br/>
<button type="button" id="btStartUpload">Start</button>

Javascript :

$("#btStartUpload").on("click", function(evt) {        

    var filesSelected = document.getElementById('btInput').files; // FileList object
    // var filesSelected = $('#btInput').prop('files'); // with jQuery
    // var filesSelected = $('#btInput')[0].files; // with jQuery, any jQuery object have it's DOM element accessed using [0]
    // var filesSelected = $('input[type=file]')[0].files;
    console.log(filesSelected);

    uploader.addFiles(filesSelected);
});

来源：https://stackoverflow.com/questions/16675649/fineuploader-can-i-use-addfiles-from-the-jquery-wrapper

标签

jquery

file-upload

fine-uploader