如何在不使用webforms的情况下在aspx页面上传文件?

时间:2017-07-21 22:31:00

标签: javascript c# asp.net file-upload pagemethods

我有一个aspx页面,它已经有一个使用“asp:FileUpload”和webform上传文件的代码。在页面的不同部分,我想为用户添加上传文件的功能。但我不想使用webforms或“asp:fileupload”。

所以,我创建了一个HTML文件,我在aspx上的div标签中作为iframe注入。

<div id="iUploadDoc" style="height:50px;">
<iframe name='FileUpload'   id='FileUpload' class='iUploadFrame' width='100%' frameborder='0' border='0'src='DocUpload.htm'></iframe></div>

我将EnablePageMethods设置为true。

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">


在HTML中我制作了一个表格和输入类型文件。

<form method="POST" action="DocDetail.aspx.cs" id="docUpload" enctype="multipart/form-data">
        <div>
            <label for="fileUpload" class="inputLabel">Upload File</label>
            <input type="file" id="fileUpload" name="files"/>

        </div>
    </form>
<div id="progUpload" style="display: none;">
            <p class="uploadBox">Uploading...</p>
        </div>
        <span id= "selectedFile" style="display: none;"></span><span id="fileName" style="display: none;"></span>

现在,我不知道在形式的“行动”格式中放入什么。 首先在iframe上,下面是我写的脚本:

window.onload = load;
function uploadDocFile() {  
    var prog = document.getElementById("progUpload");
    prog.style.cssText = 'display: block;';
    var x = document.getElementById("fileUpload");
    var txt = "";
    var filePath = "";
    var fileName = "";
    if (x.value == "") {
        txt += "Select a file.";
        document.getElementById("selectedFile").innerHTML = txt;
    } else {
        filePath = x.value;
        fileName = filePath.replace(/^.*[\\\/]/, '');
        txt += "<br>Selected file: ";
        document.getElementById("selectedFile").innerHTML = txt;
        document.getElementById("fileName").innerHTML = fileName;
    }

    var formInfo = document.getElementById("docUpload");
    document.getElementById("docUpload").style.display = "none";
    window.parent.getFormData(formInfo, x ,x.value, fileName);
}

function load() {
    var e = document.getElementById("fileUpload");
    //var formInfo = document.getElementById("docUpload");
    //fakeClick();
    e.onchange = function () {
        uploadDocFile();
    }
}

然后在父页面上,下面是我写的脚本。

    DocUpload.prototype.uploadFileDoc= function (formInfo, uploadedFile, fileInfo, lastModifiedDate, name, extension, size, type) {
//blacklitsType is an array of types of file (similarly for blacklistExt) that should not be allowed to upload
if (indexOf.call(blackListType, type) < 0 && indexOf.call(blackListExt, extension) < 0) {    
var idParams = { OiD: ordId, pID: pId, QID: qId }
        var files = uploadedFile.files;
                    var fileEntries = [];
                    for (j = 0, len1 = files.length; j < len1; j++) {
                        file = files[j];
                        if (file.getAsEntry) {
                            entry = file.getAsEntry();
                        } else if (file.webkitGetAsEntry) {
                            entry = file.webkitGetAsEntry();
                        }
                        if (entry) {
                            isFyl = entry.isFile;
                            if (!isFyl) {
                                alert("You can not upload a folder. Uploading files (if present).");
                            } else {
                                fileItem = file.getAsFile();
                                fileEntries.push(fileItem);
                            }
                        } else if (!file.type && file.size % 4096 === 0) {
                            alert("You can not upload a folder. Uploading files (if present).");
                        } else {
                            fileEntries.push(file);
                        }
                    }


                PageMethods.UploadDocument(fileEntries[0], idParams, function (res) {
                    if (res == true) {
                        alert("File uploaded successfully.");                   
                    } else {                    
                        alert("File upload failed.");                   
                    }
                }, function (err) {
                    alert("ERROR: " + err._message);                
                });         

            } else {            
                window.alert('You cannot upload incorrect file types.');            
            }
            return;
        };

    DocUpload.prototype.getFormData = function (formInfo, uploadedFile, fileInfo, nameInfo) {
            var currDate, extension, lastModifiedDate, name, nameArr, size, type;
            currDate = new Date();
            lastModifiedDate = currDate;
            type = '';
            size = 512;
            name = nameInfo;
            nameArr = name.split(".");
            extension = nameArr[nameArr.length - 1];
            DocUpload.prototype.uploadFileDoc(formInfo, uploadedFile, fileInfo, lastModifiedDate, name, extension, size, type);
        };
    window.getFormData = DocUpload.prototype.getFormData;

从iframe到父页面的表单属性的传输工作正常。但是我应该如何使用PageMethod将其发布为文件。下面是我的代码中的页面方法:

    [System.Web.Services.WebMethod()]           
    [System.Web.Script.Services.ScriptMethod(UseHttpGet = false)]
    public static bool UploadDocument(HttpPostedFileBase uploadedFile,IdParams idParams) {
    bool err = false;
    try{ 
//code 
err= true;}
    catch(Exception ex){err = false;}
    return err;
        }  

无论尝试了多少,我都会不断收到有关HTTPPostedFileBase或子系列化的错误.Below只是我不断遇到的一些错误(不是同时):

No parameterless constructor System.Web.HttpPostedFileBase aspx, OR
The formatter threw an exception while trying to deserialize the message: There was an error while trying to deserialize parameter

我该怎么办?

0 个答案:

没有答案