HTML5上传不会在服务器上存储文件

时间:2021-10-11 07:09:14

I'm developed an XMLHTTPRequest Formdata Uploader using upload api. My Javascript runs without error and upload status ends correct with upload complete. I'm using windows Server 2008 ans ASP Classic. But i think, ASP Classic isn't the problem. I thinking, i have a data transfer problem. Below is my code.

我使用upload api开发了一个XMLHTTPRequest Formdata Uploader。我的Javascript运行没有错误,上传完成后上传状态结束。我正在使用Windows Server 2008和ASP Classic。但我认为,ASP Classic不是问题所在。我想,我有数据传输问题。以下是我的代码。

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

And the HTML-Part

和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>

I have a preview image table with a button. When clicking this button the event calls the function sendForm with button as parameter. Later i will check, wich button id is clicked to upload images seperately for each previewed image. So, this function calls uploadFiles function with file-control as parameter. The code running without any problems, but the image isn't storing on servers directory. Please can anywhere tell me, wich problem i having?

我有一个带按钮的预览图像表。单击此按钮时,事件将使用按钮作为参数调用函数sendForm。稍后我将检查,点击按钮ID为每个预览图像单独上传图像。因此,此函数使用file-control作为参数调用uploadFiles函数。代码运行没有任何问题,但图像不存储在服务器目录中。请随便告诉我,我有问题吗?

On Server-Side the Folder has IIS ans Network_Service has read and write rights.

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

thanks a lot for any solution René

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

1 个解决方案

#1


0  

You've said:

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

… which will overwrite the default header and destroy the separator information (so the server won't know where one part ends and the next begins).

...将覆盖默认标头并销毁分隔符信息(因此服务器将不知道一个部件的结束位置和下一个部件的开始位置)。

Don't do that.

不要那样做。

#1


0  

You've said:

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

… which will overwrite the default header and destroy the separator information (so the server won't know where one part ends and the next begins).

...将覆盖默认标头并销毁分隔符信息(因此服务器将不知道一个部件的结束位置和下一个部件的开始位置)。

Don't do that.

不要那样做。