AsyncFileUpload双上传

Question

我试着用AsyncFileUpload和按钮上传图片。下面是我用来做这个的代码。但这会导致双上传，无法确定如何只在单击btnUpload后才上传图像。当前的问题是，一旦我在异步文件文件控件中浏览了我想要的图像，就会有一个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，您可以有效地调用代码来保存文件。来自这里

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

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

如果您只希望在单击“上载”按钮后上传文件，则需要研究其他控件，您可能希望查看其他上载控件(例如AjaxFileUpload或ASP.net中的标准文件上载控件，但我不太确定它对更新面板的作用有多好)。