Question

我正在以ajax支持的形式使用Formstone拖放文件上传。在ajax函数响应后，使用$（“。uploadImage”）。upload（“ start”）和$（“。uploadDocs”）。upload（“ start”）分别初始化图像和文档的上载部分。每个函数都起作用，但是我想传递一个自定义变量，例如将文件夹名称传递给formstone并使用该名称创建一个文件夹，然后将图像和文档上传到该文件夹。该怎么做？

插入的Ajax函数并返回ID

$.ajax({
 type: 'POST',
 url: base_url + 'innovation/addProcess',
 dataType: "html",
 data: $('#add_innovation').serialize(),
 success: function(result) {

    var res = result.split("#");
    if (res[0] == 'success') {
       $(".uploadImage").upload("start",postData: {"ideaId":10});// sending custom value to formstone, which is not working as of now
       $(".uploadDocs").upload("start",postData: {"ideaId":10});
     } else {   
        showNotification('alert-danger', result);
     }

    },
     error: function(error) {
        console.log('error');
     }
 });

表格初始化

Formstone.Ready(function() {

  $(".uploadImage").upload({            
    maxSize: 1073741824,
    beforeSend: onBeforeSend,
    autoUpload: false,
    //postData: {"ideaId":50} // this is working. but don't want this here
  }).on("start.upload", onStart)
  .on("complete.upload", onComplete)
  .on("filestart.upload", onFileStart)
  .on("fileprogress.upload", onFileProgress)
  .on("filecomplete.upload", onFileComplete)
  .on("fileerror.upload", onFileError)
  .on("queued.upload", onQueued);

$(".uploadDocs").upload({            
  maxSize: 1073741824,
  beforeSend: onBeforeSend,
  autoUpload: false,
}).on("start.upload", onStart)
.on("complete.upload", onComplete)
.on("filestart.upload", onFileStart)
.on("fileprogress.upload", onFileProgress)
.on("filecomplete.upload", onFileComplete)
.on("fileerror.upload", onFileError)
.on("queued.upload", onQueued);

});

function onCancel(e) {
   console.log("Cancel");
   var index = $(this).parents("li").data("index");
   $(this).parents("form").find(".upload").upload("abort", 
   parseInt(index, 10));
}

function onCancelAll(e) {
  console.log("Cancel All");
  $(this).parents("form").find(".upload").upload("abort");
}

function onBeforeSend(formData, file) {     

 console.log(formData.get("ideaId")); // here i need the posted data. currently its not getting here

 formData.append("ideaId", ideaId);
 return ((file.name.indexOf(".jpg") <= -1) && (file.name.indexOf(".png") <= -1)) ? false : formData; // cancel all jpgs

 }

function onQueued(e, files) {
    console.log("Queued");
    var html = '';
    for (var i = 0; i < files.length; i++) {
      html += '<li data-index="' + files[i].index + '"><span class="content"><span class="file">' + files[i].name + '</span><span class="cancel">Cancel</span><span class="progress">Queued</span></span><span class="bar"></span></li>';
   }

  $(this).parents("form").find(".filelist.queue")
    .append(html);
 }

 function onStart(e, files) {

   $(this).parents("form").find(".filelist.queue")
    .find("li")
    .find(".progress").text("Waiting");
 }

 function onComplete(e) {
  console.log("Complete");
  // All done!
 }

function onFileStart(e, file) {
  console.log("File Start");
  $(this).parents("form").find(".filelist.queue")
    .find("li[data-index=" + file.index + "]")
    .find(".progress").text("0%");
 }

function onFileProgress(e, file, percent) {
  console.log("File Progress");
   var $file = $(this).parents("form").find(".filelist.queue").find("li[data-index=" + file.index + "]");

  $file.find(".progress").text(percent + "%")
  $file.find(".bar").css("width", percent + "%");
}

function onFileComplete(e, file, response) {
  console.log("File Complete");
  if (response.trim() === "" || response.toLowerCase().indexOf("error") > -1) {
     $(this).parents("form").find(".filelist.queue")
        .find("li[data-index=" + file.index + "]").addClass("error")
        .find(".progress").text(response.trim());
  } else {
    var $target = 
     $(this).parents("form").find(".filelist.queue").find("li[data-index=" + file.index + "]");
      $target.find(".file").text(file.name);
      $target.find(".progress").remove();
      $target.find(".cancel").remove();




$target.appendTo($(this).parents("form").find(".filelist.complete"));
    }
  }

   function onFileError(e, file, error) {
     console.log("File Error");
     $(this).parents("form").find(".filelist.queue")
    .find("li[data-index=" + file.index + "]").addClass("error")
    .find(".progress").text("Error: " + error);
  }

我在其中使用Formstone控制的HTML

<div class="uploadImage" style="height:100px;border:1px dashed #000;" data-upload-options='{"action":"<?php echo base_url();?>innovation/uploadImage","chunked":true}'></div>


<div class="uploadDocs" style="height:100px;border:1px dashed #000;" data-upload-options='{"action":"<?php echo base_url();?>innovation/uploadDocs","chunked":true}'></div>

Answer 1

尝试一下...

.ajax({
 type: 'POST',
 url: base_url + 'innovation/addProcess',
 dataType: "html",
 data: $('#add_innovation').serialize(),
 success: function(result) {

    var res = result.split("#");
    if (res[0] == 'success') {
       $(".uploadImage").upload("defaults", {postData: {"ideaId":10}});
       $(".uploadImage").upload("start");
       $(".uploadDocs").upload("defaults", {postData: {"ideaId":10}});
       $(".uploadDocs").upload("start");
     } else {   
        showNotification('alert-danger', result);
     }

    },
     error: function(error) {
        console.log('error');
     }
 });

在调用方法“ start”之前，需要添加选项“ postData”。据我从文档中了解，“开始”方法不允许其他参数。

Answer 2

CodyKL的解决方案使用defaults方法工作，或者您可以在beforeSend回调中附加额外的参数：

// Var to store ID of inserted item
var resultId;

// Insertion AJAX
$.ajax({
  ...
  success: function(result) {
    // Get the id from the result
    resultId = result;

    // Start the upload
    $(".uploadImage").upload("start");
  },
  ...
});

// Initialize Upload
$(".uploadImage").upload({
  ...
  beforeSend: onBeforeSend,
  ...
});

// Modify upload form data 
function onBeforeSend(formData, file) {
  formData.append('ideaId', resultId); // add resultID obtained in insertion AJAX above to form data

  return formData; // Return modified formData
}

您应该阅读JS和FormData API的工作原理：https://developer.mozilla.org/en-US/docs/Web/API/FormData。

将自定义变量传递给福克斯

2 个答案: