网站首页杂项

ajax 异步上传文件 formData

发布时间：2018-08-22编辑：Cary.He

HTML

<input type="file" id="ar_img" name="ar_img" accept="image/*" class="layui-btn layui-btn-normal">

<textarea id="ar_content" name="ar_content" style="width:100%;height:300px;"></textarea>




JS

var form=document.getElementById("form1");//form id  获取整个表单数据

var formData = new FormData(form);   //实例formData对象 获取整个表单数据

formData.append("ar_content", $('#ar_content').val());  //内容

formData.append("ar_img", document.getElementById("ar_img").files[0]);  //上传图片

$.ajax({

                url: "article/add",

                type: "POST",

                data: formData,

                /**

                 *必须false才会自动加上正确的Content-Type

                 */

                contentType: false,

                /**

                 * 必须false才会避开jQuery对 formdata 的默认处理

                 * XMLHttpRequest会对 formdata 进行正确的处理

                 */

                processData: false,

                success: function (data) {

                    var obj = JSON.parse(data);

                    if (obj.status == 200) {

                        layer.alert(obj.msg,{icon:6});

                        // 获得frame索引

                        var index = parent.layer.getFrameIndex(window.name);

                        //关闭当前frame

                        parent.layer.close(index);

                    }

                    if (obj.status != 200) {

                        layer.alert(obj.msg,{icon:5});

                    }

                },

                error: function () {

                    alert("上传失败！");

                    $("#imgWait").hide();

                }

            });




            return false;