HTML type file uploading images to specified folder

Because of security restrictions we can't save any files client side. The user needs to actively save the file (allowing with clicking "Save As" button in browser) . I assume you want to upload the files to server side folder . With Html file tag , you can try :

<form id="form1" runat="server" enctype="multipart/form-data">
 <input type="file" id="myFile" name="myFile" />
 <asp:Button runat="server" ID="btnUpload" OnClick="btnUploadClick" Text="Upload" />
</form>

Code behind :

protected void btnUploadClick(object sender, EventArgs e)
{
    HttpPostedFile file = Request.Files["myFile"];

    //check file was submitted
    if (file != null && file.ContentLength > 0)
    {
        string fname = Path.GetFileName(file.FileName);
        file.SaveAs(Server.MapPath(Path.Combine("~/App_Data/", fname)));
    }
}

Reference : https://stackoverflow.com/a/569612/5751404

You can also use the ASP.Net FileUpload control , see the code sample below :

https://www.aspsnippets.com/Articles/Create-Folder-Directory-and-Upload-file-in-ASPNet-using-C-and-VBNet.aspx

If you are using MVC , you can refer to below link for code sample :

https://www.aspsnippets.com/Articles/Upload-and-Save-file-to-Server-Folder-Disk-in-ASPNet-MVC.aspx

Best Regards,

Nan Yu

MSDN Community Support
Please remember to "Mark as Answer" the responses that resolved your issue.

Reply

vijaylakshmi

Member

78 Points

199 Posts

Re: HTML type file uploading images to specified folder

Jul 10, 2018 08:44 AM|vijaylakshmi|LINK

instead of Asp button,

can there be a html button calling server side control..

i think this acheived only thru web method?? am i right

If yes, i have never sent file info in json.. can anyone help

Reply

vahid bakkhi

Star

8069 Points

2780 Posts

Re: HTML type file uploading images to specified folder

Jul 10, 2018 08:57 AM|vahid bakkhi|LINK

hi

please refer to below link

https://stackoverflow.com/questions/22655618/file-upload-without-using-any-asp-controls

vahid bakhtiary

Please MARK AS ANSWER if suggestion helps.

Reply

Nan Yu

All-Star

18265 Points

3593 Posts

Microsoft

Re: HTML type file uploading images to specified folder

Jul 10, 2018 09:25 AM|Nan Yu|LINK

Hi vijaylakshmi,

In webforms you can use ajax to call server side function and use httphandler on server side as shown in @vahid bakkhi's link . And here is mvc version :

https://www.c-sharpcorner.com/UploadFile/manas1/upload-files-through-jquery-ajax-in-Asp-Net-mvc/

Best Regards,

Nan Yu

MSDN Community Support
Please remember to "Mark as Answer" the responses that resolved your issue.

Reply

vijaylakshmi

Member

78 Points

199 Posts

Re: HTML type file uploading images to specified folder

Jul 10, 2018 11:28 AM|vijaylakshmi|LINK

I am not using MVC.. :-(

Can anyone tell how to name the image with a specific name before it is uploaded

Reply

vahid bakkhi

Star

8069 Points

2780 Posts

Re: HTML type file uploading images to specified folder

Jul 10, 2018 11:53 AM|vahid bakkhi|LINK

in below code, I highlighted the newFilenamethat you can define your custom name

Html:

<input type="file" id="uploadFile" name="uploadFile"/>
<input type="button" id="submit" value="Submit" onClick="UploadFile();"/>

JQuery:

 <script type="text/javascript">
$(document).ready(function () {
        function UploadFile() {
    var fileName = $('#uploadFile').val().replace(/.*(\/|\\)/, '');
                       if (fileName != "") {
                        $.ajaxFileUpload({ url: 'AjaxFileUploader.ashx',
                            secureuri: false,
                            fileElementId: 'uploadFile',
                            dataType: 'json',
                            success: function (data, status) {
                               if (typeof (data.error) != 'undefined') {
                        if (data.error != '') {
                            alert(data.error);
                        } else {
                            alert('Success');
                        }
                    }
                },
                  error: function (data, status, e) {
                                alert(e);
                            }
                        }
                        )
                    }
}
});

Please download ajax file uploader plugin from tyhe bekow link.

http://www.phpletter.com/DOWNLOAD/

Handler:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.IO;
    using System.Text.RegularExpressions;
    using System.Text;
 namespace MyProject
 {
   public class AjaxFileUploader : IHttpHandler
   {
    {

        public void ProcessRequest(HttpContext context)
        {

            if (context.Request.Files.Count > 0)
            {
                string path = context.Server.MapPath("~/UploadImages");
                if (!Directory.Exists(path))
                    Directory.CreateDirectory(path);

                var file = context.Request.Files[0];

                string fileName;

                if (HttpContext.Current.Request.Browser.Browser.ToUpper() == "IE")
                {
                    string[] files = file.FileName.Split(new char[] { '\\' });
                    fileName = files[files.Length - 1];
                }
                else
                {
                    fileName = file.FileName;
                }
                string newFilename = Guid.NewGuid().ToString();
                FileInfo fInfo = new FileInfo(fileName);
                newFilename = string.Format("{0}{1}", newFilename, fInfo.Extension);
                string strFileName = newFilename;
                fileName = Path.Combine(path, newFilename);
                file.SaveAs(fileName);


                string msg = "{";
                msg += string.Format("error:'{0}',\n", string.Empty);
                msg += string.Format("msg:'{0}'\n", strFileName);
                msg += "}";
                context.Response.Write(msg);


            }
        }

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

vahid bakhtiary

Please MARK AS ANSWER if suggestion helps.

Reply

vijaylakshmi

Member

78 Points

199 Posts

Re: HTML type file uploading images to specified folder

Jul 11, 2018 05:43 AM|vijaylakshmi|LINK

Can you tell me what wrong with my code..

[WebMethod]
[ScriptMethod]
public static void InsertWebService(check c)
{

HttpPostedFile postedFile= c.photo;
string fileName = System.IO.Path.GetFileName(postedFile.FileName);

//Set the Image File Path.
string filePath = "~/check/" + fileName;

//Save the Image File in Folder.
postedFile.SaveAs(HttpContext.Current.Server.MapPath(filePath));

//performing normal insert query ..
Connection con = new Connection();
SqlConnection conn = new SqlConnection();
SqlCommand cmd = new SqlCommand();
conn = con.getConnection();
try
{

conn.Open();
query = "";

// Query written

}//close finally

AJAX call..

student.photo = $('#photo').val(), // I need to know if i can send the path like this.. this gives c:\fakepath\fileuploaded.jpg

//normal call to web service

Reply

Nan Yu

All-Star

18265 Points

3593 Posts

Microsoft

Re: HTML type file uploading images to specified folder

Jul 12, 2018 08:32 AM|Nan Yu|LINK

Hi vijaylakshmi,

vijaylakshmi

Can you tell me what wrong with my code..

Do you get any error message and what is the problem with your code . We can always add generic handler ( ashx file) to handle server side code :

https://codepedia.info/upload-image-using-jquery-ajax-asp-net-c-sharp/

Best Regards,

Nan Yu

MSDN Community Support
Please remember to "Mark as Answer" the responses that resolved your issue.

HTML type file uploading images to specified folder [Answered]RSS

8 replies

Shortcuts