Question

我尝试使用AsyncFileUpload和按钮上传图像。下面是我用来做的代码。但它导致双重上传不确定如何只在点击btnUpload后才能上传图像。目前的问题是，一旦我在asyncfileupload控件中浏览我想要的图像，就会有一个loading.gif显示它正在加载，我刷新页面而不点击已经上传到数据库的btnUpload图像。我想要做的是只在点击btnUpload后才上传图片。帮忙解决这个问题。谢谢！

标记代码：

<script type="text/javascript" language="javascript">
    function StartUpload(sender, args) {
        var filename = args.get_fileName();
        var path = args.get_path();
        if (filename != "") {
            // code to get File Extension..
            var arr1 = new Array;
            arr1 = filename.split("\\");
            var len = arr1.length;
            var img1 = arr1[len - 1];
            var filext = img1.substring(img1.lastIndexOf(".") + 1);


            // Checking Extension
            if (filext == "jpg" || filext == "JPG") {
                $get("<%=lblUpload.ClientID %>").innerHTML = "";
                $get("<%=btnUpload.ClientID %>").disabled = false;
                return true;
            }
            else {
                $get("<%=lblUpload.ClientID %>").innerHTML = "Only .jpg and .JPG image allowed.";
                $get("<%=btnUpload.ClientID %>").setAttribute('disabled', 'disabled');
                return false;
            }
        }
    }

<asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" 
CompleteBackColor="Lime" UploaderStyle="Modern" 
ErrorBackColor="Red" ThrobberID="Throbber" 
OnUploadedComplete="btnUpload_Click" 
UploadingBackColor="#66CCFF"
OnClientUploadStarted="StartUpload"
align="center"/>

<br />
<br />

<asp:Label ID="Throbber" runat="server" Style="display: none">
<img src="image/indicator.gif" alt="loading" />
</asp:Label>

<asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" />

<br />
<br />

<asp:Label ID="lblUpload" runat="server" Text=""></asp:Label>

btnUpload代码：

protected void btnUpload_Click(object sender, EventArgs e)
    {
        if (AsyncFileUpload1.HasFile == true)
        {
            String nric = (String)Session["nric"];

            string filePath = AsyncFileUpload1.PostedFile.FileName;
            string filename = Path.GetFileName(filePath);
            string ext = Path.GetExtension(filename);

            string contenttype = String.Empty;

            switch (ext)
            {
                case ".jpg":
                    contenttype = "image/jpg";
                    break;

                case ".JPG":
                    contenttype = "image/jpg";
                    break;
            }
            if (contenttype != String.Empty)
            {
                System.Drawing.Image uploaded = System.Drawing.Image.FromStream(AsyncFileUpload1.PostedFile.InputStream);

                System.Drawing.Image newImage = new Bitmap(1024, 768);
                using (Graphics g = Graphics.FromImage(newImage))
                {
                    g.InterpolationMode = InterpolationMode.HighQualityBicubic;
                    g.DrawImage(uploaded, 0, 0, 1024, 768);
                }

                byte[] results;
                using (MemoryStream ms = new MemoryStream())
                {
                    ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders().FirstOrDefault(c => c.FormatID == ImageFormat.Jpeg.Guid);
                    EncoderParameters jpegParms = new EncoderParameters(1);
                    jpegParms.Param[0] = new EncoderParameter(Encoder.Quality, 95L);
                    newImage.Save(ms, codec, jpegParms);
                    results = ms.ToArray();

                }

                //insert the file into database
                string strQuery = "Update MemberAccount Set profilepicture = @Data Where nric = @Nric";
                SqlCommand cmd = new SqlCommand(strQuery);

                cmd.Parameters.Add("@Nric", SqlDbType.VarChar).Value = nric;

                cmd.Parameters.AddWithValue("@Data", results);

                InsertUpdateData(cmd);

                UpdatePanel2.Update();                    

                lblUpload.ForeColor = System.Drawing.Color.Green;
                lblUpload.Text = "Profile Picture Updated.";
            }
        }
    }

Answer 1

我认为只需删除下面的行就可以了。

OnUploadedComplete="btnUpload_Click"

请告诉我它是否有用......

Answer 2

我认为您没有按照预期的方式使用AyncFileUpload控件。该控件旨在自动选择文件后上传文件。 “上传”按钮的更正确的术语将是“保存”，因为它只需要保存在服务器上的文件。

通过调用OnUploadedComplete，您实际上是在调用代码来保存文件。来自here：

UploadedComplete - 文件成功时在服务器端触发上传

正如aliCna建议您应该删除此调用，因为它似乎是多余的。

如果您只想在单击“上传”按钮后上传文件，则需要调查其他控件，您可能需要查看其他上传控件（例如AjaxFileUpload或标准文件在ASP.net上传控件[虽然我不太确定使用更新面板的效果如何]。

AsyncFileUpload双上传

2 个答案: