Question

我正在使用Ajax Mini File Upload Form来允许用户拖放文件以上传到服务器。

客户端表单和脚本是相同的，区别在于upload.php。

为了允许上传，用户需要凭据。我无法找到如何在upload.php页面上添加发送登录名和密码。

编辑：

我已经尝试阅读源代码以了解我可以添加所需参数的位置，但到目前为止我只发现参数存储在formData中。

由于我匆忙，我已经在上传页面中硬编码了登录名和密码，所以我可以在服务器端继续编码（这是当前的焦点），直到我可以添加代码客户端来包含这两个参数

以下只是带有主脚本的页面的html部分，因为所有脚本都太大而无法在此处发布

<div id="AuthForm" class="div_border">
    <p>You need to login in order to use the servicer</p>
    <label>Login :</label><br>
    <input type="text" id="auth_login"><br>
    <label>Password :</label><br>
    <input type="text" id="auth_password"><br/><br/>
    <input type="button" value="Submit" onclick="lf_login();">
</div>

上面是包含登录表单的div，我从中获取登录名和密码

<div id="AdminTest" class="div_border">
    <form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
        <div id="drop">
            Drop Here

            <a>Browse</a>
            <input type="file" name="upl" multiple />
        </div>

        <ul>
            <!-- The file uploads will be shown here -->
        </ul>

    </form>
</div>

以上是脚本用于上传文件的表单。

$(function(){

var ul = $('#upload ul');

$('#drop a').click(function(){
    // Simulate a click on the file input button
    // to show the file browser dialog
    $(this).parent().find('input').click();
});

// Initialize the jQuery File Upload plugin
$('#upload').fileupload({

    // This element will accept file drag/drop uploading
    dropZone: $('#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 = $('<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);

        // 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');
    }

});


// Prevent the default action when a file is dropped on the window
$(document).on('drop dragover', function (e) {
    e.preventDefault();
});

// Helper function that formats the file sizes
function formatFileSize(bytes) {
    if (typeof bytes !== 'number') {
        return '';
    }

    if (bytes >= 1000000000) {
        return (bytes / 1000000000).toFixed(2) + ' GB';
    }

    if (bytes >= 1000000) {
        return (bytes / 1000000).toFixed(2) + ' MB';
    }

    return (bytes / 1000).toFixed(2) + ' KB';
}

});

上面是使用jquery.fileUpload脚本上传文件的主脚本。

Mini Ajax文件上传表单

0 个答案: