Question

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

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

单击“保存”按钮时，上传图像的路径应保存在数据库中。

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

P.S。我使用客户端功能上传照片。

以下是我的代码。

上传照片的客户端功能

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

Answer 1

我建议你通过JS放弃客户端AJAX上传，并坚持标准的上传方式。你可以在没有过多的javascript的情况下实现相同的效果。

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

Getting extension of the file in FileUpload Control

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

添加更新面板将使用户更加友好，您应该完成所有工作。

Answer 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;
        }
    }
}

Answer 3

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

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

ASP.NET中的照片上传

3 个答案: