在上载文本文件时XHR块上载有一个问题
问题描述:
Iam在我的ColdFusion项目中使用XHR块上载。除了扩展名为.txt的文件以外,所有类型的文件都可以正常上传。 当我试图上传文本文件时,它将被上传并变为空(文件大小变为0字节)。在上载文本文件时XHR块上载有一个问题
为什么会发生这种情况?
这是我得到的例外......
An exception occurred when executing method write.The cause of this exception was that: coldfusion.runtime.Cast$NumberConversionException: The value Hello this is a test file. cannot be converted to a number..
这里是我的home.cfm
<html>
\t <head>
\t \t <title>Chunk Upload</title>
\t \t <style type="text/css">
\t \t \t .text-center{text-align: center;}
\t \t \t #alert{color: red}
\t \t \t #uploading, .filesize{color: red}
\t \t \t #success{color: green}
\t \t </style>
\t </head>
\t <body>
\t \t <script type="text/javascript">
var blobs = [];
function bytesToSize(bytes) {
\t \t \t var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
\t \t \t if (bytes == 0) return '0 Byte';
\t \t \t var i = parseInt(Math.floor(Math.log(bytes)/Math.log(1024)));
\t \t \t return Math.round(bytes/Math.pow(1024, i), 2) + ' ' + sizes[i];
\t \t \t };
\t \t /*
\t \t * function that uploads a fragment of the file
\t \t */
function uploadChunk(blob, fileName, fileType, count){
var xhr = new XMLHttpRequest();
xhr.open('POST', 'chunkUpload.cfm', false);
xhr.onload = function(e){
document.getElementById("success").innerHTML = "Uploading... <span class='filesize'>" + count + "</span> MB";
}
xhr.setRequestHeader('X_FILE_NAME', fileName);
xhr.setRequestHeader('Content-Type', fileType)
// document.getElementById("uploading").innerHTML += "Uploading chunk of size " + blob.size + ".<br/>";
xhr.send(blob);
};
\t \t /*
\t \t * Invoke this function when the submit button is clicked.
\t \t */
\t \t function uploadSubmit(){
\t \t \t var fileInputs = document.querySelectorAll('#userfile');
\t \t \t for (i = 0; i < fileInputs.length; i++) {
sliceFilesToFragments(fileInputs[i]);
}
\t \t };
\t \t /*
\t \t * function that slice the file into 1MB fragment
\t \t */
\t \t function sliceFilesToFragments(input){
\t \t \t var count = 0;
\t \t \t var file = input.files[0];
// Upload 1 mb per chunk
var bytes_per_chunk = 1024 * 1024;
var start = 0;
var end = bytes_per_chunk;
var size = file.size;
document.getElementById("TotalSize").innerHTML += "Total File size <span class='filesize'>"+bytesToSize(size)+"</span>";
while (start < size) {
\t \t \t //push the fragments to an array
blobs.push(file.slice(start, end));
start = end;
end = start + bytes_per_chunk;
}
var blobArray = blobs.slice();
\t \t //upload the fragment to the server
while (blob = blobs.shift()) {
\t count++;
\t if(blobArray.length == count){
\t \t count = 'File Uploaded Successfully';
\t }
\t \t \t \t uploadChunk(blob, file.name, file.type, count);
}
\t \t };
\t \t </script>
\t \t \t \t <h2 class="text-center">Chunk Upload using XHR & CF</h2>
\t \t <form name="myform" method="post" enctype="multipart/form-data" >
\t \t \t <pre>
\t \t \t \t * notes *
\t \t \t \t 1) Refresh Each time, before upload
\t \t \t \t 2) Uploading 1 mb per chunk for now
\t \t \t \t 3) To see the chunks: go to Chrome > inpect element > Network tab
\t \t \t </pre>
\t \t \t <pre>
\t \t \t \t Upload:<input type="file" id="userfile"><br>
\t \t \t </pre>
\t \t \t <pre>
\t \t \t \t <input type="button" id="submit" value="Submit" onclick="uploadSubmit()"><br>
\t \t \t </pre>
\t \t \t <pre><span id="TotalSize"></span></pre><br>
\t \t \t <pre><span id="success"></span></pre>
\t \t </form>
\t </body>
</html>
这是我chunkUpload。 cfm
<cfoutput>
\t <cfset headerData = getHTTPRequestData().headers>
\t <cfset content = getHTTPRequestData().content>
\t <cfset filePath = expandPath("./Uploads/") & "#headerData.X_FILE_NAME#">
\t <cfset fos = createObject("java", "java.io.FileOutputStream").init(filePath, true)>
\t <cfset fos.write(content)>
\t <cfset fos.close()>
</cfoutput>
有人可以帮助我解决呢?
答
通过更改文件的内容类型解决了我的问题。更新您的内容类型如下
xhr.setRequestHeader('Content-Type', "application/octet-stream");
您有没有找到解决方案?我得到了完全相同的错误。 – MPaul