如何用Jquery ajax把上传的图片和信息显示到页面中

Question

我现在可以上传一张图片预览到页面上，也可以把文字插入到数据库中
但是我不知道怎么用Jquery Ajax同时把照片和文字同时插入到数据库中
并显示到页面上？

        $('#send').click(function () {

            var message = $('#publishcontent').val();
            var imgsrc = $('.imgcontent').attr('src');
            //alert(message);
            //alert(imgsrc);
            if ((message == null || message =="") && (imgsrc == null || imgsrc=="")) {
                alert("please input message or image!")
            }
            else if (message != null && (imgsrc == null || imgsrc == "")) {

                $.ajax({
                    url:"/PublishandFeedback/PublishSave",
                    type: "POST",
                    async: true,
                    data: { "message": message, "imgsrc": "" },
                    dataType: "json",
                    success: function (result) {
                        if (result != null) {
                            //$('.publishContent').append('<div class="content">'+message+'</div>');
                            $('.publishArea').prepend('<div class="publishUserImgDiv"><img src= "../Images/Team member.PNG" class="userImg"></div>' +
                                '<div class="publishUserName">' + result[0].CreateBy + '</div>' +
                                '<div class="publishContent">' + result[0].PContent + '</div>' +
                                '<div class="publishLeftDown">' +
                                '<ul class ="ulLeftDown">' +
                                '<li id="publishTime"><span>Time</span></li>' +
                                '<li id="userlike"><span><a href="javascript:void(0)" onclick=ILike()>Like</a></span></li>' +
                                '<li id="feedbackArea"><span><a href="javascript:void(0)" onclick=Feedback()>Comment</span></li>' +
                                '</ul><hr></div>');
                        } else {
                            alert('Error');
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus); // paser error;
                        alert("Error:" + result.toString());
                    },
            });
            }
            else if ((message == null || message=="") && imgsrc != null)
            {

                $.ajax({
                    url: "/PublishandFeedback/PublishSave",
                    type: "POST",
                    async: true,
                    data: { "message": message, "imgsrc": imgsrc },
                    dataType: "json",
                    success: function (result) {
                        if (result != null) {
                            $('.publishArea').prepend('<div class="publishUserImgDiv"><img src= "../Images/Team member.PNG" class="userImg"></div>' +
                                '<div class="publishUserName">' + result[0].CreateBy + '</div>' +
                                 '<div class="publishImg"><img src="' + result[0].Imgsrc + '" style="width: 400px; height: 400px;" /></div>' +
                                 '<div class="publishLeftDown">' +
                                 '<ul class ="ulLeftDown">' +
                                 '<li id="publishTime"><span>Time</span></li>' +
                                 '<li id="userlike"><span><a href="javascript:void(0)" onclick=ILike()>Like</a></span></li>' +
                                 '<li id="feedbackArea"><span><a href="javascript:void(0)" onclick=Feedback()>Comment</span></li>' +
                                 '</ul><hr></div>');
                        } else {
                            alert('Error');
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus); // paser error;
                        alert("Error:" + result.toString());
                    },
                });

            }
            else if (message != null && imgsrc != null)
            {
                $.ajax({
                    url: "/PublishandFeedback/PublishSave",
                    type: "POST",
                    async: true,
                    data: { "message": message, "imgsrc": imgsrc },
                    dataType: "json",
                    success: function (result) {
                        if (result != null) {
                            $('.publishArea').prepend('<div class="publishUserImgDiv"><img src= "../Images/Team member.PNG" class="userImg"></div>' +
                                '<div class="publishUserName">' + result[0].CreateBy + '</div>' +
                                '<div class="publishContent">' + result[0].PContent + '</div>' +
                                 '<div class="publishImg"><img src="' + result[0].Imgsrc + '" style="width: 400px; height: 400px;" /></div>' +
                                 '<div class="publishLeftDown">' +
                                 '<ul class ="ulLeftDown">' +
                                 '<li id="publishTime"><span>Time</span></li>' +
                                 '<li id="userlike"><span><a href="javascript:void(0)" onclick=ILike()>Like</a></span></li>' +
                                 '<li id="feedbackArea"><span><a href="javascript:void(0)" onclick=Feedback()>Comment</span></li>' +
                                 '</ul><hr></div>');
                        } else {
                            alert('Error');
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus); // paser error;
                        alert("Error:" + result.toString());
                    },
                });
            }

        });
        
       //load Publish and Feedback
        function pafload() {
            $.ajax({
                url: "/PublishandFeedback/PaFLoad",
                type: "POST",
                async: true,
                data: {},
                dataType: "json",
                success: function (result) {
                    if (result != null)
                    {
                        for (var i = 0; i < result.length; i++) {
                            $('.publishArea').prepend('<div class="publishUserImgDiv"><img src= "../Images/Team member.PNG" class="userImg"></div>' +
                                '<div class="publishUserName">' + result[i].CreateBy + '</div>' +
                                '<div class="publishContent">' + result[i].PContent + '</div>' +
                                 '<div class="publishImg"><img src="' + result[i].Imgsrc + '" style="width: 400px; height: 400px;" /></div>' +
                                 '<div class="publishLeftDown">' +
                                 '<ul class ="ulLeftDown">' +
                                 '<li id="publishTime"><span>Time</span></li>' +
                                 '<li id="userlike"><span><a href="javascript:void(0)" onclick=ILike()>Like</a></span></li>' +
                                 '<li id="feedbackArea"><span><a href="javascript:void(0)" onclick=Feedback()>Comment</span></li>' +
                                 '</ul><hr></div>');
                        }
                    }
                }
            });
        } 
        

Answer 1

HTML FormData 可以满足你的需求。

需要后端支持这种操作。

或者使用 Promise.all，并发上传

Answer 2

<div id="dialog-bianJi">
    <!-- 全屏阴影-->
    <div class="dialog-shadow"></div>
    <!-- 弹出框-->
    <div class="dialog-content">
        <p class="content-title">编辑图片<span onclick="tanClose('dialog-bianJi')"></span></p>
        <div class="content-body">
            <!--<div>公司名称<input type="text" placeholder="www.baidu.com"></div>-->
            <!--<div class="file">上传专题-->
            <!--<div class="show-file">-->
            <!--<input type="text" value="未选择任何文件"/>-->
            <!--<button></button>-->
            <!--</div>-->
            <!--<input type="file">-->
            <!--<br><i>建议图片尺寸为1700x450，最大比例为：4比1</i>-->
            <!--</div>-->
            <form id="formEdit" enctype="multipart/form-data">
                <input class="adId" name="adId" style="display:none">
                <input class="ufId" name="ufId" style="display:none">
                <label>广告名称<input type="text"  name="name" class="name" id="addName"></label>
                <label>链接地址<input type="text"  name="link" class="link"></label>
                <label class="file">上传图片
                    <div class="show-file">
                        <input class="input-bj" type="text">
                        <button></button>
                    </div>
                    <input id="file-bj" type="file"  class="file" accept="image/jpeg,image/jpg,image/png">
                    <br><i>建议图片尺寸为1920x225，最大比例为:8:1</i>
                </label>
                <label style="margin-top:15px;">位&ensp;&ensp;&ensp;&ensp;置
                    <select  class="position" name="position">
                        <option value="1">新闻中心</option>
                        <option value="0">房产中心</option>
                    </select>
                </label>
            </form>
        </div>
        <div class="content-footer">
            <button class="qx" onclick="tanClose('dialog-bianJi')">取消</button>
            <button class="qr" onclick="edit('dialog-tianJia','formEdit','/HeRuiProperty/colation/adp/edit')">确认</button>
        </div>
    </div>
</div>

function edit(obj,obj1,url){//要关闭的弹框类名 form表单id 编辑接口
    var token1 ='basic '+ window.sessionStorage.token;
    var url = browerUrl+url;
    var obj1 = "#"+obj1;
    messageShow1("提交中");
    var formData = new FormData($(obj1)[0]);
    var file1 = document.getElementById('file-bj').files[0];
    console.log('file1:',file1);
    if(!file1){
        formData.append('file',"");
    }else{
        formData.append('file',file1);
    }
    for(var x of formData){
        console.log(x)
    }
    $.ajax({
        type:"post",
        async:true,
        cache: false,
        contentType: false,
        processData: false,
        url:url,
        data:formData,
        beforeSend: function(request) {

                        // request.setRequestHeader("Content-Type","application/json");
                        request.setRequestHeader("Authorization", token1);
                    },
        success:function(dat){
            console.log(dat);
            if(dat.code==309){
                backHome();
            }
            if(dat.code==305){
                backHome();
            }
            if(dat.code==1){
                messageShow("操作成功");
                tanClose(obj);
                setTimeout(reload(),5000);
            }
            else if(dat.code==309){
                backHome();
            }
            else{
                messageShow("请填写正确内容");
                console.log(dat.msg);
            }

        }
    })
}

提供一种思路而已 这是直接复制我做的项目的代码 比较丑