Question

我正在尝试使用Ajax实现多个文件上传，或者至少它应该看起来像ajax（没有页面重新加载）。以下是我的代码......

我可以使用简单的提交来完成。在上面的代码中，我可以获取所有文件的列表，重新编辑一些文件，然后将其余文件上传到服务器。但我想像ajax一样，使用进度条。我不能使用文件api作为服务器端的python然后获取文件对象。任何帮助表示赞赏。

<!DOCTYPE html>

上传

    <script type="text/javascript">
        var file_array = [];
        var file_name_cell,relation_cell, option_cell, sr_no_cell;
        var rowId = 0;
        var fileCount = 1;
        var new_file_id = '';
        var array_last_index = 0;


        /* ----------- To add file name in the hidden field start ----------- */

        function addFileName(fileId){
            var file = document.getElementById(fileId);
            for(var i=0; i<file.files.length; i++){
                file_array.push(file.files.item(i).fileName);

            }
            $('#file_names').val(file_array.join('^'));
            file.style.display = 'none';
            createNewFileInput();
            addRow();

        }

        /* ----------- To add file name in the hidden field end ----------- */

        /* ----------- To create and display new file input start ------------ */

        function createNewFileInput(){
            fileCount += 1
            new_file_id = 'files_' + fileCount;

            var new_file_input = document.createElement('input');
            new_file_input.setAttribute('type', 'file');
            new_file_input.setAttribute('name', new_file_id);
            new_file_input.setAttribute('id', new_file_id);
            new_file_input.setAttribute('multiple', 'multiple');
            new_file_input.setAttribute('onchange', 'addFileName(\'' + new_file_id + '\')');
            document.getElementById('file_input_area').appendChild(new_file_input);

        }

        /* ----------- To create and display new file input end  ------------ */

        /* ----------- To add row in the table start ----------- */

        function addRow(){
            var table = document.getElementById('selected_files_table_body');
            var last_row,
                row;
            for(var i=array_last_index; i<file_array.length; i++){
                rowId += 1;
                try{
                    last_row = table.rows.length;
                }
                catch(e){
                    row = table.insertRow(0);
                }
                row = table.insertRow(last_row);
                row.id = rowId;
                sr_no_cell = row.insertCell(0);
                sr_no_cell.innerHTML = rowId+'.';
                file_name_cell = row.insertCell(1);
                file_name_cell.style.textAlign = 'left';
                file_name_cell.innerHTML = file_array[i];
                option_cell = row.insertCell(2);
                option_cell.innerHTML = '<a href="javascript<b></b>:void(0)"><img src="/django_forms_media/icon/remove.png" onclick="removeRow(' + rowId + ',\'' + file_array[i] + '\');" border=0 /></a>&nbsp;';


            }
            array_last_index = file_array.length;

        }

        /* ----------- To add row in the table end ----------- */


        /* ----------- To remove row from the table start ----------- */

        function removeRow(removeRowId, file_to_remove){
            var row = document.getElementById(removeRowId);
            row.parentNode.removeChild(row);
            removeFileName(file_to_remove);
        }

        /* ----------- To remove row from the table end ----------- */

        /* ----------- To remove specific file name from hidden field and array start ----------- */

        function removeFileName(file_to_remove){
            for (var i = 0; i < file_array.length; i++) {
                if (file_array[i] == file_to_remove) {
                    file_array.splice(i, 1);
                    array_last_index -= 1;
                    break;
                }
            }
            $('#file_names').val(file_array.join('^'));
        }

        /* ----------- To remove specific file name from hidden field and array end ----------- */

        /* ----------- To clear the file array and removing all rows start ----------- */

        function clearAllFiles(){
            file_array = [];
            var table = document.getElementById("selected_files_table_body");
            for (var i = table.rows.length - 1; i > 0; i--) {
                table.deleteRow(i);
                rowId = 0;
            }
        }

        /* ----------- To clear the file array and removing all rows end ----------- */


    </script>
</head>
<body>
    <div >

        <div >
            <div >
                <fieldset>
                    <legend>
                        Upload Package
                    </legend>
                    <form id="frm_upload_package" name="frm_upload_package" action="/djangoforms/uploadcontents/" method="post" enctype="multipart/form-data">
                        <div class="selectfile">
                            <label>
                                Select Files:
                            </label>
                            <br/>
                        </div>
                        <span id="file_input_area">
                            <input id="files_1" type="file" name="files_1" multiple = "multiple" onchange="addFileName('files_1');"/>
                            <input id="file_names" type="hidden" size=100 name="fileNames" />
                        </span>
                        <fieldset style="width:70%;">
                            <legend>Selected Files</legend>
                            <table id = "selected_files_table" name = "selected_files_table" style="margin-left:0" class="sortable" cellspacing="0" cellpadding="3" border="0">
                                <thead>
                                    <tr>
                                        <th>Sr.No.</th>
                                        <th>File Name</th>
                                        <th>Option</th>

                                    </tr>
                                </thead>
                                <tbody id = "selected_files_table_body" name = "selected_files_table_body">
                                </tbody>
                            </table>
                        </fieldset>
                        <div class="buttonrow">
                            <input type="button" value="Upload" id="upload_package" name="upload_package">&nbsp;
                            <input type="reset" name="reset_button" id="reset_button" value="Cancel" onclick ="clearAllFiles();"/>

                        </div>
                    </form>
                </fieldset>
            </div>
        </div>
    </div>
</body>

Answer 1

您必须使用隐藏的iframe并在那里发送数据，因此无法使用XMLHttpRequest上传文件。此外，有很多jQuery插件可以完成这项工作，你可以看看它们。

Answer 2

不通过JavaScript无法上传文件。借助于Firefox 3.5开始的sendAsBinary方法，可以实现这一目标。在Firefox 4+（也在Chrome 5+和Safari 5+中），还支持FormData界面，可以轻松构建multipart/form-data个请求（请在http://www.faqs.org/rfcs/rfc2388.html详细了解它）。有关如何通过XMLHttpRequest发送文件的详细信息，请参阅http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html。

使用ajax上传多个文件

2 个答案: