Fatal编程技术网
  • asp.net/
  • ASP.NET中的照片上传

ASP.NET中的照片上传

asp.net file-upload

ASP.NET中的照片上传,asp.net,file-upload,Asp.net,File Upload,我有一个图像框和一个带有保存按钮的照片上传控件。我需要上传一个图像到图像框 当我点击上传按钮时，它会在图像框中显示图像 当我点击Save按钮时，上传图像的路径应该保存在数据库中 我的问题是照片被上传，但只有在我第二次点击上传按钮之后 另外，我使用客户端功能上传照片 以下是我的代码 用于上传照片的客户端功能 function ajaxPhotoUpload() { var FileFolder = $('#hdnPhotoFolder').val(); var f

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

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

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

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

另外，我使用客户端功能上传照片

以下是我的代码

用于上传照片的客户端功能

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;

    }
我建议您放弃通过JS进行客户端AJAX上传，并坚持使用标准的上传方式。您可能可以在不使用过多javascript的情况下实现相同的效果

如果文件类型过滤是一个问题，你可以查看这篇文章了解更多细节

无论采用哪种方式，您都必须进行回发，这样无论您是从JS还是从服务器端上传，都不重要，除非第二种方法不那么复杂

添加“更新”面板将使此操作更加方便用户，您应该完成所有操作。

谢谢您的时间和帮助。！波浪号（~）符号是问题所在-无法识别文件的路径。所以我修改了我的代码，将其替换为空白

<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>

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

var orgpath=data.upfile；
var photopath=orgpath.replace（“~/”，”）；
$（'#'）.attr（'src'，photopath）；
您面临什么问题？对不起，我不太明白：（@Karthik，我的问题是照片被上传了，但只有在我点击上传按钮（btnSave）后才可以上传）这是第二次。您是否在页面上使用更新面板？图像是否根本没有保存在目标文件夹中，或者现在是否显示在预览中？@Vishweshwar，我有。但是上载控件仅在UpdatePanel之外。 
<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;
        }
    }
}

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