May 27, 2016

Upload Image with MVC ajax


function ImageUpload(link, display, data) {

    $.ajax({
        type: "POST",
        url: link,
        contentType: false,
        processData: false,
        data: data,
        beforeSend: onBegin,
        complete: onComplete,
        success: function (result) {
            console.log(result);
            $('#' + display).attr('src', result);
        },
        error: function (xhr, status, p3, p4) {
            var err = "Error " + " " + status + " " + p3 + " " + p4;
            if (xhr.responseText && xhr.responseText[0] == "{")
                err = JSON.parse(xhr.responseText).Message;
            console.log(err);
        }
    });

}

<div class="form-group">
             <label class="control-label col-sm-2">Preview image</label>

             <div class="col-md-10">
                 <div class="img-preview img-preview-sm">
                     <img id="imggroup" src="@Url.Content(ImageLink)" style="min-width: 0px ! important; min-height: 0px ! important; max-width: none ! important; max-height: none ! important; width: 250px; height: 250px; margin-left: -25px; margin-top: -63px;">
                 </div>
                 <div class="btn-group">
                     <label class="btn btn-primary" for="inputImage" title="Upload image file">
                         <input type="file" class="hide" id="inputImage" name="file" accept="image/*">
                         Upload new image
                     </label>
                     @*<label class="btn btn-primary" id="download" title="Donload image">Download</label>*@
                 </div>

             </div>
         </div>

<script>
    $('#inputImage').on('change', function (e) {
        var files = e.target.files;
        //var myID = 3; //uncomment this to make sure the ajax URL works
        if (files.length > 0) {
            if (window.FormData !== undefined) {
                var data = new FormData();
                for (var x = 0; x < files.length; x++) {
                    data.append("file" + x, files[x]);
                }
                ImageUpload('@Url.Action("UploadImage", "Controller", "imggroup", data);
            } else {
                alert("This browser doesn't support HTML5 file uploads!");
            }
        }
    });

</script>


        [HttpPost]
        public async Task<JsonResult> UploadImage()
        {
         
            try
            {

             
                    foreach (string file in Request.Files)
                    {
                        var fileContent = Request.Files[file];
                        if (fileContent != null && fileContent.ContentLength > 0)
                        {
                            // get a stream
                            var stream = fileContent.InputStream;
                            // and optionally write the file to disk
                            var fileName = Path.GetFileName(fileContent.FileName);
                            var path = Path.Combine(IOHelper.GetDirectory(string.Format(SystemConst.ComGroupFolder, GroupCode)), fileName);
                            using (var fileStream = System.IO.File.Create(path))
                            {
                                stream.CopyTo(fileStream);                              
                            }
                         
                     
                    }
                }
            }
            catch (Exception objex)
            {
                // Response.StatusCode = (int)HttpStatusCode.BadRequest;
                return Json("Upload failed:" + objex.Message);
            }

            return Json(@Url.Content(ImageLink));
        }

0 comments:

Post a Comment

Nam Le © 2014 - Designed by Templateism.com, Distributed By Templatelib