在 ASP.NET 中上传照片答案

【问题标题】：Photo Upload in ASP.NET在 ASP.NET 中上传照片
【发布时间】：2013-09-25 05:11:46
【问题描述】：

我有一个图像框和一个带有保存按钮的照片上传控件。我需要将图像上传到图像框。

当我单击上传按钮时，它应该在图像框中显示图像。

当我点击保存按钮时，上传图片的路径应该保存在数据库中。

我的问题是照片被上传了，但只有在我第二次点击上传按钮之后。

附：我使用客户端功能来上传照片。

以下是我的代码。

上传照片的客户端功能

function ajaxPhotoUpload() {

        var FileFolder = $('#hdnPhotoFolder').val();
        var fileToUpload = getNameFromPath($('#uplPhoto').val());

        var filename = fileToUpload.substr(0, (fileToUpload.lastIndexOf('.')));
        alert(filename);
        if (checkFileExtension(fileToUpload)) {

            var flag = true;
            var counter = $('#hdnCountPhotos').val();

            if (filename != "" && filename != null && FileFolder != "0") {
                //Check duplicate file entry
                for (var i = 1; i <= counter; i++) {
                    var hdnPhotoId = "#hdnPhotoId_" + i;

                    if ($(hdnPhotoId).length > 0) {
                        var mFileName = "#Image1_" + i;

                        if ($(mFileName).html() == filename) {
                            flag = false;
                            break;
                        }

                    }
                }
                if (flag == true) {
                    $("#loading").ajaxStart(function () {
                        $(this).show();
                    }).ajaxComplete(function () {
                        $(this).hide();
                        return false;
                    });


                    $.ajaxFileUpload({
                        url: 'FileUpload.ashx?id=' + FileFolder + '&Mainfolder=Photos' + '&parentfolder=Student',
                        secureuri: false,
                        fileElementId: 'uplPhoto',
                        dataType: 'json',
                        success: function (data, status) {

                            if (typeof (data.error) != 'undefined') {
                                if (data.error != '') {
                                    alert(data.error);
                                } else {

                                    $('#hdnFullPhotoPath').val(data.upfile);
                                    $('#uplPhoto').val("");
                                    $('#<%= lblPhotoName.ClientID%>').text('Photo uploaded successfully')
                                }
                            }


                        },
                        error: function (data, status, e) {
                            alert(e);
                        }
                    });
                }

                else {
                    alert('The photo ' + filename + ' already exists');
                    return false;
                }
            }
        }
        else {
            alert('You can upload only jpg,jpeg,pdf,doc,docx,txt,zip,rar extensions files.');
        }
        return false;

    }

带有保存按钮和图像框的照片上传控件

<table>
        <tr>
            <td>
    <asp:Image ID="Image1" runat="server" Height="100px" Width="100px" ClientIDMode="Static" />
                <asp:FileUpload ID="uplPhoto" runat="server" ClientIDMode="Static"/>
                <asp:Label ID="lblPhotoName" runat="server" Text="" ForeColor ="Green" ClientIDMode="Static"></asp:Label>
<asp:Button id="btnSave" runat="server" Text="Upload Photograph" onClick="btnSave_Click"  OnClientClick="return ajaxPhotoUpload();"/>
           </td>
                </tr>
            </table>

在服务器端保存按钮点击事件（在图片框中显示上传的图片）

Protected Sub btnSave_Click(sender As Object, e As EventArgs)
    Image1.ImageUrl = hdnFullPhotoPath.Value

End Sub

【问题讨论】：

您遇到了什么问题？抱歉我没看清楚:(
@Karthik，我的问题是照片被上传了，但只有在我第二次点击上传按钮 (btnSave) 之后。
您是否在页面上使用更新面板？
图像根本没有保存在目标文件夹中还是现在显示在预览中？
@Vishweshwar，我愿意。但上传控件仅在 UpdatePanel 之外。

标签： asp.net file-upload

【解决方案1】：

我建议您放弃通过 JS 进行客户端 AJAX 上传，并坚持使用标准上传方式。不用过多的 javascript 也可以达到同样的效果。

如果文件类型过滤是一个问题，您可以查看此帖子了解更多详细信息。

Getting extension of the file in FileUpload Control

无论哪种方式，您都必须进行回发，因此从 JS 或服务器端上传并不重要，只是第二种方法不太复杂。

添加更新面板将使这更加用户友好，您应该已经完成了。

【讨论】：

【解决方案2】：

<head runat="server">
<title>Index</title>
 <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/ajaxupload.js" type="text/javascript"></script>
</head>

<body>

<div>
    <input type="button" id="uploadFile" value="Upload File" />(jpg|jpeg|png|gif)
    <div id="uploadStatus" style="color: Red">
    </div>
</div>
<script type="text/javascript" language="javascript">

        new AjaxUpload('#uploadFile', {
            action: 'Handler1.ashx',
            name: 'upload',
            onComplete: function (file, response) {

                if (response == '0') {
                    $('#uploadStatus').html("File can not be upload.");
                }
                else {
                    $('#img').attr("src", "response.path");
                }

            },
            onSubmit: function (file, ext) {
                if (!(ext && /^(jpg|jpeg|png|gif)$/i.test(ext))) {
                    $('#uploadStatus').html("Invalid File Format..");
                    return false;
                }

                $('#uploadStatus').html("Uploading...");
            }

        });

</script>

然后创建一个用于在服务器上上传图像的处理程序

public class Handler1 : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        string a = "1";

        if (context.Request.Files != null && context.Request.Files.Count > 0)
        {
            if (context.Request.Files[0].ContentLength > 1000)
            {
                a = "0";
            }
        }
        else
        {
            a = "0";
        }

        context.Response.Write(a);

        context.Response.End();

    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

【讨论】：

【解决方案3】：

所有，感谢您的时间和帮助。！波浪号（〜）符号是问题 - 无法识别文件的路径。所以我修改了我的代码，用空格替换它。

var orgpath = data.upfile;
var photopath = orgpath.replace('~/', '');
$('#<%= ImgFacultyPhoto.ClientID%>').attr('src', photopath);

【讨论】：