点击功能上传文件答案

【问题标题】：on click function to upload file点击功能上传文件
【发布时间】：2020-05-22 02:36:23
【问题描述】：

我正在尝试在 asp.net 中创建一个文件上传器，它可以上传文件并在我的网格中显示它们，并且还可以查看它们，但我不想使用 asp 控件。我想通过使用 html 标签来做到这一点。我见过的所有教程都使用asp控件。下面是我的html：

               <tr>
                <td class="label" style="width:15%">
                File Name
                 </td>
                <td class="description" >
                <input type="text" id="txtFileName" class="largeTextField"  style="width:260px;"/>
               </td>

               <div class="validator" id="txtFileNameVld" style="display: none">
                                                        *</div>

                                            </tr>


               <tr>                              
               <td class="label" style="width:15%">
                Upload File
                </td>
                 <td class="description" >
                <input type="file" id="FileUpload1" class="largeTextField" multiple="multiple"   
                style="width:260px;"/>
               <input type="button" id="btnUpload" value="Upload"  onclick="Upload" />
               </td>

                <div class="validator" id="txtUploadFileVld" style="display: none">
                                                        *</div>

                                            </tr>

我想创建一个上传功能，但我已经看到了所有链接。找不到任何地方，我不知道该怎么做。有人可以帮帮我吗？

【问题讨论】：

标签： asp.net file-upload

【解决方案1】：

带有扩展检查的单个文件

function Upload() {
    var fileInput = document.getElementById('files');
    var filePath = fileInput.value;
    var allowedExtensions = /(\.jpg)$/;
    if (!allowedExtensions.exec(filePath)) {
        alert('this file is not allowed to upload')
        fileInput.value = '';
        return false;
    }
    var formData = new FormData(this);
    $.ajax({
        url: '/AjaxFileUpload/UploadFiles',
        type: 'POST',
        data: formData,
        success: function (data) {
            //Success Message
        },
        error: function (xhr, status, error) {
            if (status === "timeout") {
                alert(msg_timeout);
            } else {
                alert(msg_error);
            }
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

多文件上传请参考以下链接

https://www.yogihosting.com/jquery-file-upload/

【讨论】：