javascript - 上传图片和用户详细信息

Question

我正在尝试通过单击按钮上传图像以及用户电子邮件和密码。只有我可以上传图片。但我无法使用上传按钮提交用户详细信息。任何人都可以帮助我提交带有详细信息的图像，这非常有帮助。

这是我的 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>

和 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();
            }                
        }
    })
}

Answer 1

您仅获取数据中的图像:

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

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

您还需要获取其他详细信息，并将其附加到数据中。

例如

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

并将其也附加到数据中。

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