CODEWITHSUNDEEP
javascriptjquery
thilina.gg
thilina.gg

Reputation: 31

upload a image and user details

I am trying to upload a image and user email and password with the button click. only i can upload a image. but i can not submit user details with the upload button. any one can help me to submit image with the details it's very helpful.

here is my html

<div>
    <div class="form-group">

        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>

    <div class="col-md-4">
        <div class="btn btn-primary" id="previewImage">
            <input type="file" id="imageBrowse" />
        </div>
        <div id="imgPreview" class="thumbnail" style="display:none">
            <img id="targetImg" class="img-responsive" />
            <div class="caption">
                <a href="#" onclick="ClearPreview()"><i class="glyphicon glyphicon-trash"></i></a>
                <span id="description"></span>
            </div>

        </div>
    </div>
</div>
<div>
    <button type="button" class="btn btn-primary" onclick="UploadImage()">Upload</button>
</div>

<div id="uploadedImage" class="col-md-4 thumbnail">

</div>

and javascript

function UploadImage() {
    debugger;
    var file = $("#imageBrowse").get(0).files;

    var data = new FormData;
    data.append("ImageUrl", file[0]);

    $.ajax({
        dataType: 'json',
        contentType: false,
        processData:false,
        cache: false,
        type: 'POST',
        data: data,
        url: "/Department/UploadImage",
        success: function (response) {
            if (response == null) {
                ClearPreview();
                alert("Invalied file format...!!!" + '\n' + "please upload .Jpg, .jpg, .png, .jpeg")                  
            }
            else {
                $("#uploadedImage").append('<img src="/ImageUpload/' + response + '"class="img-responsive thumbnail"/>');
                $("#uploadedImage").show();
                ClearPreview();
                $("#previewImage").hide();
            }                
        }
    })
}

Upvotes: 0

Views: 44

Answers (1)

learner
learner

Reputation: 4818

You are getting only image in data:

 var file = $("#imageBrowse").get(0).files;

    var data = new FormData;
    data.append("ImageUrl", file[0]);

You need to get other details too, and append it to the data.

e.g.

var email = $("#exampleInputEmail1").val()
var password = $("#exampleInputPassword1").val()

and append it to data too.

data.append("emal",email);
data.append("password",password);

Upvotes: 1

Related Questions