HTML5上传没有't在服务器上存储文件

HTML5 Upload doesn't storing file on Server

本文关键字:存储文件 服务器 HTML5      更新时间:2023-09-26

我使用uploadapi开发了一个XMLHTTPRequestFormdata Uploader。我的Javascript运行无错误,上传状态以上传完成。我使用的是windows Server 2008ASP Classic。但我认为ASP经典版不是问题所在。我在想,我有一个数据传输问题。下面是我的代码。

        function sendForm(form, btn) {
        for (x=0; x < document.getElementById("auswahl").files.length; x++){    
            uploadFiles(document.getElementById("auswahl"));
        }
    }
    var url= "http://www.centil-europe.ch/db/Images/test/";
    //$(document).ready(function(){
    //  document.getElementById('upload').addEventListener('change', function(e) {
        function uploadFiles(filecntrl){
            var file = filecntrl.files[0];
            var xhr = new XMLHttpRequest();
            xhr.file = file; // not necessary if you create scopes like this
            xhr.addEventListener('progress', function(e) {
                var done = e.position || e.loaded, total = e.totalSize || e.total;
                console.log('xhr progress: ' + (Math.floor(done/total*1000)/10) + '%');
            }, false);
            if ( xhr.upload ) {
                xhr.upload.onprogress = function(e) {
                    var done = e.position || e.loaded, total = e.totalSize || e.total;
                    console.log('xhr.upload progress: ' + done + ' / ' + total + ' = ' + (Math.floor(done/total*1000)/10) + '%');
                };
            }
            xhr.onreadystatechange = function(e) {
                if ( 4 == this.readyState ) {
                    console.log(['xhr upload complete', e]);
                }
            };
            xhr.open('post', url, true);
            xhr.setRequestHeader("Content-Type","multipart/form-data");
            var formData = new FormData();
            formData.append("thefile", file);
            xhr.send(formData);
        }
    //  }, false);
    //});

和HTML部分

        <BODY bgcolor="#FFFFFF" link="#999900" vlink="#CCCC33" alink="#999966">
    <table cellSpacing="0" cellPadding="4" width="767" align="center" height="100" border="0" bgcolor="#FFFFFF">
      <tbody>
        <tr>
          <td vAlign="middle" width="100%" height="100" bgcolor="#F5F5F5">
        <FORM METHOD="POST" ENCTYPE="multipart/form-data" id="iduploadfrm">
            <Input Type="hidden" Name="ID" value="<%=ID%>">
            <TABLE BORDER=0 class="Tabelle">
        <tr>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td><b>File zum uploaden ausw&auml;hlen:</b><br>
            <input type=FILE size=50 name="FILE1" class="Textfield" id="auswahl" multiple>
          </td>
        </tr>
        <tr><td><!--//Database&nbsp;<INPUT TYPE=RADIO NAME="saveto" value="database">//-->
        </td>
        </tr>
        <tr align="right"> 
          <td> 
            <INPUT TYPE=SUBMIT VALUE="Upload!" class="Button">
          </td>
        </tr>
        </TABLE>
            <!-- The table listing the files available for upload/download -->
        <table role="presentation" class="table table-striped" id="tblpresentation">
        <tbody class="files">
            <tr class="template-upload fade in" id="filetbl" style="visibility:hidden">
                <td width="17%">
                    <span id="idimage" class="preview"></span>
                </td>
                <td width="16%">
                    <p class="name">&nbsp;</p>
                    <strong class="error text-danger"></strong>
                </td>
                <td width="26%">
                    <p class="size" id="size">&nbsp;</p></td>
                <td width="41%">
                    <button class="btn btn-primary start" id="idstart" onClick="sendForm(document.getElementById('iduploadfrm'),this);">
                        <span>Start</span>
                    </button>
                    <button class="btn btn-warning cancel">
                        <i class="glyphicon glyphicon-ban-circle"></i>
                        <span>Cancel</span>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
    </FORM>
    </table>

我有一个带按钮的预览图像表。单击此按钮时,事件调用函数sendForm,并将按钮作为参数。稍后我会检查,点击哪个按钮id可以为每个预览的图像单独上传图像。因此,此函数调用uploadFiles函数,并将文件控制作为参数。代码运行没有任何问题,但映像没有存储在服务器目录中。请告诉我,我有什么问题?

在服务器端,文件夹具有IIS,而Network_Service具有读取和写入权限。

非常感谢您提供的任何解决方案René

您说过:

xhr.setRequestHeader("Content-Type","multipart/form-data");

…这将覆盖默认标头并销毁分隔符信息(这样服务器就不知道一个部分的结尾和下一个部分开始的位置)。

不要那样做。