Question

我尝试使用JQueryFileUpload插件在表单填写时进行ajax上传。但是我有一个难题，因为我需要为形式参数的人提供不同的网址。

我在JQueryFileUpload对象中使用url param，但如果文件输入字段位于表单中，则它无法正常工作。然后它在.fileupload函数中使用表单操作url'index.php？option = com_xxx＆amp; layout = edit＆amp; id = 0'而不是这个url'index.php？option = com_xxx＆amp; task = item.uploadImage'。

如何在fileupload函数中使用ulr param，并在某个表单内部使用不同的动作URL进行文件字段？有可能吗？

JQuery代码：

jQuery('#jform_file').fileupload({

    url: 'index.php?option=com_xxx&task=item.uploadImage',

    // This element will accept file drag/drop uploading
    dropZone: jQuery('#drop'),

    // This function is called when a file is added to the queue;
    // either via the browse button, or via drag/drop:
    add: function (e, data) {

        var tpl = jQuery('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
            ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');

        // Append the file name and file size
        tpl.find('p').text(data.files[0].name)
                     .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

        // Add the HTML to the UL element
        data.context = tpl.appendTo(ul);
        previewImage(data);

        // Initialize the knob plugin
        tpl.find('input').knob();

        // Listen for clicks on the cancel icon
        tpl.find('span').click(function(){

            if(tpl.hasClass('working')){
                jqXHR.abort();
            }

            tpl.fadeOut(function(){
                tpl.remove();
            });

        });

        // Automatically upload the file once it is added to the queue
        var jqXHR = data.submit();
    },

    progress: function(e, data){

        // Calculate the completion percentage of the upload
        var progress = parseInt(data.loaded / data.total * 100, 10);

        // Update the hidden input field and trigger a change
        // so that the jQuery knob plugin knows to update the dial
        data.context.find('input').val(progress).change();

        if(progress == 100){
            data.context.removeClass('working');
        }
    },

    fail:function(e, data){
        // Something has gone wrong!
        data.context.addClass('error');
    }

});

表格html：

<form action="index.php?option=com_xxx&layout=edit&id=0" method="post" name="adminForm" id="adminForm" class="form-validate">
    <input type="file" name="jform[file]" id="jform_file" />  
</form>

Answer 1

偶然我发现了解决方案。我在正确的之前添加了一个fileupload调用：

jQuery(function(){

    jQuery('#adminForm').fileupload();

    jQuery('#jform_file').fileupload({

        url: 'index.php?option=com_xxx&task=item.uploadImage',

    });

});

首先返回表单操作url结果，这样可能会导致一些问题。但是第二次调用会返回url param的结果。

JqueryFileUpload表单url问题

1 个答案: