使用Dropzone.js上传后,新用户创建,发送标题新用户、上传、标题、Dropzone

2023-09-10 16:39:15 作者:铁蹄踏破流年流年戳碎谎言

我使用的是一个伟大的插件 - dropzone.js(dropzonejs.com)注册新用户时,使我的网站多了几分花哨

基本上,用户填写表单,滴一对夫妇的图像进入悬浮窗,并点击提交,它将触发Ajax调用的员额的形式,PHP脚本。

我必须设置为enqueForUpload悬浮窗参数:假的,这使从自动上传的文件,因为我需要他们上传到上传/ $用户ID,新的用户ID已经被创建之后。我可以给悬浮窗头PARAMS,这我假设,而不是数据后的url,类似于一个Ajax调用,:{用户ID:用户ID},悬浮窗采用头:{用户ID:用户ID} ...但是,得到悬浮窗上的document.ready初始化,并作为用户标识变量未声明的是,悬浮窗初始化失败。

我猜我会需要初始化悬浮窗用的document.ready,而不是给它标头,只是还没有。再经过了ajax形式处理成功并返回用户ID,叫悬浮窗上载,并给它的头在这一点上。问题是,我不知道的C $ C将需要被调用来实现这一目标是什么$。

初​​始化悬浮窗上的准备:

  $(文件)。就绪(函数(){
  $('#悬浮窗)。悬浮窗({
    网址:dropzoneprocess.php,
    MAXFILESIZE:1,
    paramName配置:'照片',
    addRemoveLinks:真正的,
    enqueueForUpload:假的,
  });
});
 

然后...

  $('#提交')。在('点击',函数(){
    在这里验证废话
    $阿贾克斯({
        类型:'后',
        网址:postform.php,
        数据:{不同:形式,价值:在这里}
        数据类型:JSON,
        成功:功能(数据){
           VAR的userid = data.userid;

    / *(这是我无法弄清楚:)
    告诉悬浮窗上载,并使其
    帖子用户ID为dropzone.php* /

     });
});
 

解决方案 七牛云上传文件js 基于 JS 高效在线文件拖拽上传插件DropZone

如果您使用最新的悬浮窗版本,参数 enqueueForUpload 已被删除,有利于 autoProcessQueue 这使得整个排队更容易。

因此​​,只需拨打 myDropzone.processQueue()只要你想要的所有文件上传。

要添加额外的参数给 XHR 你可以简单地注册到发送事件,该事件得到 XHR 对象作为第二和 FORMDATA 作为第三个参数,并添加自己的数据。事情是这样的:

  myDropzone.on(送功能(文件,XHR,FORMDATA){
  //与xhr.setRequestHeader添加页眉()或
  //与formData.append(名称,值)形式的数据;
});
 

I'm using a great plugin - dropzone.js (dropzonejs.com) to make my site a little more fancy when registering a new user.

Basically, the user fills out a form, drops a couple images into the "dropzone", and clicks "Submit", which fires an ajax call that posts the form to a php script.

I have dropzone parameters set to enqueForUpload:false, which keeps the files from auto-uploading, since I need them to upload into uploads/$userid, after the new user id has been created. I can give dropzone header params, which I'm assuming post to the url, similar to an ajax call, instead of data: {'userid': userid}, dropzone uses headers: {'userid': userid}... However, dropzone gets initialized on document.ready, and as the userid variable isn't declared yet, dropzone fails to initialize.

I'm guessing I'm going to need to initialize dropzone with document.ready, but not give it headers just yet. Then after the ajax form processing is successful and returns userid, call dropzone to upload and give it the headers at that point. Problem is, I don't know what code would need to be called to make that happen.

Initialize Dropzone on ready:

$(document).ready(function(){
  $('#dropzone').dropzone({
    url: 'dropzoneprocess.php',
    maxFilesize: 1,
    paramName: 'photos',
    addRemoveLinks: true,
    enqueueForUpload: false,
  });
});

Then...

$('#submit').on('click', function(){
    validation crap here
    $.ajax({
        type: 'post',
        url: 'postform.php',
        data: {'various': form, 'values': here}
        datatype: 'json',
        success: function(data){
           var userid = data.userid;

    /* (and this is what I can't figure out:)
    tell dropzone to upload, and make it 
    post userid to 'dropzone.php' */

     });
});

解决方案

If you use the latest Dropzone version, the parameter enqueueForUpload has been removed, in favour of autoProcessQueue which makes the whole queuing easier.

So, just call myDropzone.processQueue() as soon as you want all files to be uploaded.

To add additional parameters to the XHR you can simply register to the sending event, which gets the xhr object as second and formData as third parameter, and add the data yourself. Something like this:

myDropzone.on("sending", function(file, xhr, formData) {
  // add headers with xhr.setRequestHeader() or
  // form data with formData.append(name, value);
});

 
精彩推荐
图片推荐