jQuery上传

Question

我想知道我们是否可以使用jQuery上传文件夹及其中的内容。我尝试过使用插件，但所有插件都选择上传单个或多个文件。我们可以上传单个和多个文件夹吗？

jQuery上传

<form action="#" enctype="multipart/form-data" method="post">
    <ul>
        <li>
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" multiple>
        </li>
        <li>
            <label for="file_upload">File:</label>
            <input type="file" name="file_upload" id="file_upload" multiple>
        </li>
        <li>
            <input class="button green" type="submit" name="submit" value="Submit Content">
        </li>
    </ul>
</form>

我的JS文件

$(
function () {
    // Variable to store your files
    var files;

    // Add events
    $('input[type=file]').on('change', prepareUpload);
    $('form').on('submit', uploadFiles);

    // Grab the files and set them to our variable
    function prepareUpload(event) {
        files = event.target.files;
    }

    // Catch the form submit and upload the files
    function uploadFiles(event) {
        event.stopPropagation(); // Stop stuff happening
        event.preventDefault(); // Totally stop stuff happening

        // START A LOADING SPINNER HERE

        // Create a formdata object and add the files
        var data = new FormData();
        $.each(files, function (key, value) {
            data.append(key, value);
        });

        $.ajax({
            url: 'submit.php?files',
            type: 'POST',
            data: data,
            cache: false,
            dataType: 'json',
            processData: false, // Don't process the files
            contentType: false, // Set content type to false as jQuery will tell the server its a query string request
            success: function (data, textStatus, jqXHR) {
                if (typeof data.error === 'undefined') {
                    // Success so call function to process the form
                    submitForm(event, data);
                } else {
                    // Handle errors here
                    console.log('ERRORS: ' + data.error);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // Handle errors here
                console.log('ERRORS: ' + textStatus);
                // STOP LOADING SPINNER
            }
        });
    }

    function submitForm(event, data) {
        // Create a jQuery object from the form
        $form = $(event.target);

        // Serialize the form data
        var formData = $form.serialize();

        // You should sterilise the file names
        $.each(data.files, function (key, value) {
            formData = formData + '&filenames[]=' + value;
        });

        $.ajax({
            url: 'submit.php',
            type: 'POST',
            data: formData,
            cache: false,
            dataType: 'json',
            success: function (data, textStatus, jqXHR) {
                if (typeof data.error === 'undefined') {
                    // Success so call function to process the form
                    console.log('SUCCESS: ' + data.success);
                } else {
                    // Handle errors here
                    console.log('ERRORS: ' + data.error);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // Handle errors here
                console.log('ERRORS: ' + textStatus);
            },
            complete: function () {
                // STOP LOADING SPINNER
            }
        });
    }
});

Answer 1

我认为不可能，因为javascript不是像C＃这样的语言......你可以轻松地使用现有方法创建一个multifileuploader。

例如，您可以在目录选择器中进行思考，但两者都不是选项。

http://stackoverflow.com/questions/2809688/directory-chooser-in-html-page

简而言之：不能简单地完成。

出于安全原因，无法在纯HTML / JavaScript中完成。

选择要上传的文件是您可以做的最好的事情，即便如此   在现代浏览器中没有获得完整的原创路径。

您可以使用Java或Flash将某些内容放在一起（例如   使用SWFUpload作为基础），但它带来了很多工作   其他兼容性问题。

如何上传文件夹？

jQuery上传

1 个答案: