upload image to server from javascript

Question

I am using the below code to view the uploaded file using javascript. It display the fake path so i can't able to upload the files to server path. please help me to upload the images to server.mappath folder.

<input type='file' name='file' id='file' value='Choose Photo' accept='image/png,image/jpeg' onchange='handleFileSelect(this);' />

<script type="text/javascript">
function handleFileSelect(input) {
    try {

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                document.getElementById('hf_image').value = e.target.result
                $('#preview').attr('src', document.getElementById('hf_image').value);
            }

            reader.readAsDataURL(input.files[0]);
        }

    }
    catch (ex) {
        alert('Image Preview : ' + ex.Message);
    }
}

</script>

Answer 1

var attachments={};
function imageSelected(myFiles){
for (var i = 0, f; f = myFiles[i]; i++) {
    var imageReader = new FileReader();
    imageReader.onload = (function(aFile){
        return function(e){
            var tempFileData=e.target.result;
            attachments[aFile.name]={};
            attachments[aFile.name]["content_type"]=tempFileData.split(",")[0].split(":")[1].split(";")[0];
            attachments[aFile.name]["data"]=tempFileData.split(",")[1];

        };
    })(f);
    imageReader.readAsDataURL(f);
}

}

<input type='file' onchange="imageSelected(this.files)">

the above code may be helpful for you attachments json holds the file details

Answer 2

Why you don't use AjaxFileUploader, that is easy to use

Follow this steps to approach your target,

Step 1:

dRAG Jquery files to Head tag.

add this code to a JavaScript file and dragged it into the head of your page.

jQuery.extend({
createUploadIframe: function (id, uri) {
    //create frame
    var frameId = 'jUploadFrame' + id;
    var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
    if (window.ActiveXObject) {
        if (typeof uri == 'boolean') {
            iframeHtml += ' src="' + 'javascript:false' + '"';

        }
        else if (typeof uri == 'string') {
            iframeHtml += ' src="' + uri + '"';

        }
    }
    iframeHtml += ' />';
    jQuery(iframeHtml).appendTo(document.body);

    return jQuery('#' + frameId).get(0);
},
createUploadForm: function (id, fileElementId, data) {
    //create form   
    var formId = 'jUploadForm' + id;
    var fileId = 'jUploadFile' + id;
    var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
    if (data) {
        for (var i in data) {
            jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
        }
    }
    var oldElement = jQuery('#' + fileElementId);
    var newElement = jQuery(oldElement).clone();
    jQuery(oldElement).attr('id', fileId);
    jQuery(oldElement).before(newElement);
    jQuery(oldElement).appendTo(form);



    //set attributes
    jQuery(form).css('position', 'absolute');
    jQuery(form).css('top', '-1200px');
    jQuery(form).css('left', '-1200px');
    jQuery(form).appendTo('body');
    return form;
},

ajaxFileUpload: function (s) {
    // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout        
    s = jQuery.extend({}, jQuery.ajaxSettings, s);
    var id = new Date().getTime()
    var form = jQuery.createUploadForm(id, s.fileElementId, (typeof (s.data) == 'undefined' ? false : s.data));
    var io = jQuery.createUploadIframe(id, s.secureuri);
    var frameId = 'jUploadFrame' + id;
    var formId = 'jUploadForm' + id;
    // Watch for a new set of requests
    if (s.global && !jQuery.active++) {
        jQuery.event.trigger("ajaxStart");
    }
    var requestDone = false;
    // Create the request object
    var xml = {}
    if (s.global)
        jQuery.event.trigger("ajaxSend", [xml, s]);
    // Wait for a response to come back
    var uploadCallback = function (isTimeout) {
        var io = document.getElementById(frameId);
        try {
            if (io.contentWindow) {
                xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;
                xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document;

            } else if (io.contentDocument) {
                xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;
                xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;
            }
        } catch (e) {
            jQuery.handleError(s, xml, null, e);
        }
        if (xml || isTimeout == "timeout") {
            requestDone = true;
            var status;
            try {
                status = isTimeout != "timeout" ? "success" : "error";
                // Make sure that the request was successful or notmodified
                if (status != "error") {
                    // process the data (runs the xml through httpData regardless of callback)
                    var data = jQuery.uploadHttpData(xml, s.dataType);
                    // If a local callback was specified, fire it and pass it the data
                    if (s.success)
                        s.success(data, status);

                    // Fire the global callback
                    if (s.global)
                        jQuery.event.trigger("ajaxSuccess", [xml, s]);
                } else
                    jQuery.handleError(s, xml, status);
            } catch (e) {
                status = "error";
                jQuery.handleError(s, xml, status, e);
            }

            // The request was completed
            if (s.global)
                jQuery.event.trigger("ajaxComplete", [xml, s]);

            // Handle the global AJAX counter
            if (s.global && ! --jQuery.active)
                jQuery.event.trigger("ajaxStop");

            // Process result
            if (s.complete)
                s.complete(xml, status);

            jQuery(io).unbind()

            setTimeout(function () {
                try {
                    jQuery(io).remove();
                    jQuery(form).remove();

                } catch (e) {
                    jQuery.handleError(s, xml, null, e);
                }

            }, 100)

            xml = null

        }
    }
    // Timeout checker
    if (s.timeout > 0) {
        setTimeout(function () {
            // Check to see if the request is still happening
            if (!requestDone) uploadCallback("timeout");
        }, s.timeout);
    }
    try {

        var form = jQuery('#' + formId);
        jQuery(form).attr('action', s.url);
        jQuery(form).attr('method', 'POST');
        jQuery(form).attr('target', frameId);
        if (form.encoding) {
            jQuery(form).attr('encoding', 'multipart/form-data');
        }
        else {
            jQuery(form).attr('enctype', 'multipart/form-data');
        }
        jQuery(form).submit();

    } catch (e) {
        jQuery.handleError(s, xml, null, e);
    }

    jQuery('#' + frameId).load(uploadCallback);
    return { abort: function () { } };

},

uploadHttpData: function (r, type) {
    var data = !type;
    data = type == "xml" || data ? r.responseXML : r.responseText;
    // If the type is "script", eval it in global context
    if (type == "script")
        jQuery.globalEval(data);
    // Get the JavaScript object, if JSON is used.
    if (type == "json")
        eval("data = " + data);
    // evaluate scripts within html
    if (type == "html")
        jQuery("<div>").html(data).evalScripts();

    return data;
}

})

something like this:

 <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> 
<script src="Scripts/fileUploader.js" type="text/javascript"></script>

Step 2: Add this tags into body page.

<input id="fileToUpload" type="file" size="45" name="fileToUpload" />
<button id="btnUploadNewLicense" onclick="return ajaxFileUpload('New');">
    Upload</button><br />
<div id="loading" style="display: none;">
    Please wait...</div>

Step 3: Add a generic handler file named "FileUpload.ashx" into the your project root, add this following code into "FileUplod.ashx"

 public void ProcessRequest(HttpContext context)
    {
        HttpRequest request = context.Request;
        HttpResponse response = context.Response;
        string action = request["Action"];
        switch (action)
        {
            case "New":
                string result = "failed";
                try
                {
                    string fileName = SaveCaper(context);
                    result = "successed";
                    response.Write("{\"result\":" + result.ToString().ToLower() + "}");
                }
                catch
                {
                    response.Write("{\"result\":" + result.ToString().ToLower() + "}");
                }
                break;
            default:
                throw new Exception("Invalid sort column name!.");
        }
    }
    private string SaveCaper(HttpContext context)
    {
        string fileName = string.Empty;
        string path = context.Server.MapPath("~/NewImages");
        if (!Directory.Exists(path))
            Directory.CreateDirectory(path);
        try
        {
            var file = context.Request.Files[0];
            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 strFileName = fileName;
            fileName = Path.Combine(path, fileName);
            try
            {
                file.SaveAs(fileName);
            }
            catch (Exception exp)
            {
                //log the exception
            }
        }
        catch (Exception exp)
        {
            //log the exception
        }
        return fileName;
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

also you need to add System.IO in top of the handler code behind.

Step 4: Add this script to your head after your JS files prototype

<script language="javascript" type="text/javascript">
    $(document).ready(function () { 
    function ajaxFileUpload(mode) {
        var fupl = 'fileToUpload';
        var fileName = $('#fileToUpload').val();
        if (fileName == "" || fileName == null)//if user doesn't select an image
        {
            $("#loading").html("");
            $("#loading").append("<br/><b>Please select an image...</b>");
        }
        else {
            var vars = fileName.split("."); //get file extension.
            if (vars[1].toString().toLowerCase() != "jpg") {//check the file extension.
                $("#loading").html("");
                $("#loading").append("<br/>The image format is not valid !.");
                return false;
            }
            $("#loading").ajaxStart(function () { $('#dialogUpdateLicense :input').attr('disabled', true); $(this).show(); })
      .ajaxComplete(function () { $('#dialogUpdateLicense :input').removeAttr('disabled'); });
            $("#loading").html("");
            $("#loading").append("<br/><b>Please wait...</b>");
            $.ajaxFileUpload
        ({
            url: 'FileHandler.ashx',
            secureuri: false,
            fileElementId: 'fileToUpload',
            dataType: 'json',
            data: { Action: mode },
            success: function (data) { 
              if (data.result == "successed")
                  $("#loading").html("The image uploaded successfully!.");
            },
            error: function (data, e) {
                $("#loading").html("An error occured!.");
            }
        })
        } 
        return false; 
    } 
</script>

All thing was tested and works properly for me

I hope it will help you.