flujo de archivo de carga ajax usando formdata

    今天在做项目的时候涉及到了ajax上传文件流的问题，由于是移动端两个页面的两个表单使用同一个ajax地址进行上传数据给后台，数据中涉及到了不同类型的input，其中存在了file类型的input，导致无法使用表单序列化直接传输数据。
   只存在传递一般的参数时，可以使用$("#表单id").serialize()对form表单序列化，从而将form表单中的所有参数传递到服务端。而上传文件的文件流时无法被序列化并传递的，因此使用了FormData的对象进行文件上传。具体formdata的使用可以参见[官网](https://developer.mozilla.org/zh-CN/docs/Web/API/FormData)

//html如下
//form1
<form class="col-xs-12 register-form" id="registerForm" method="post" action="">
        <div class="form-group col-xs-wap tc">
            <div class="col-xs-2">
                <i class="icon i-store"></i>
            </div>
            <div class="col-xs-10">
                <input type="text" class="form-control" placeholder="店铺名称" id="shopName" name="shopName">
            </div>
        </div>
        <div class="form-group col-xs-wap tc">
            <div class="col-xs-2">
                <i class="icon i-user"></i>
            </div>
            <div class="col-xs-10">
                <input type="text" class="form-control" placeholder="本人姓名" id="name" name="name">
            </div>
        </div>
</form>
//form2
<form action="" method="post" class="mt10" id="registerForm2">
	 <input id="frontPhoto" name="frontPhoto"/>
	 <input id="backPhoto" name="backPhoto"/>
	 <input id="handlePhoto" name="handlePhoto"/>
</form>

$("#btn-register-confirm").click(function () {
    
    
	//upRegister()是表单验证，这就没有给出了
    if (upRegister()){
    
    
        var form=$("#registerForm2")[0];//第二个表单的id，注意[0]不能漏掉
        var fd=new FormData(form);
        //由于后台接收的数据只能是序列化之后的样子，所以将第一个表单的字段存放在cookie中。通过fd.append()以键值对形式存放
        fd.append("shopName",$.cookie("shopName"));
        fd.append("name",$.cookie("name"));
        

        $.ajax({
    
    
            type:'post',
            async: false,
            url:"url",
            data:fd,
            processData:false,//因为data值是FormData对象，不需要对数据做处理。
            contentType:false,//因为是由<form>表单构造的FormData对象，所以这里设置为false。
            success:function(data){
    
    
                if (data.resultCode=="0"){
    
    
                    webToast("成功注册！");
                    console.log("成功注册");

                }
            },
            error:function(){
    
    
                console.log("注册失败");
            }
        })
    }
});

Lo anterior ha realizado el flujo de archivos de carga ajax y los parámetros generales. Esto involucra principalmente 2 aspectos:

Se deben colocar diferentes formas de diferentes páginas en el mismo botón para activar la misma transmisión ajax al servidor. Use cookies para almacenar los datos de un formulario primero. Esto puede ser problemático e inseguro, pero en este momento solo pienso en esta forma. hay más Sí, bienvenido a agregar;
Ajax upload file stream, preste atención a var fd = new FormData ($ ("# Formid") [0]); [0] Asegúrese de traerlo, solo lo guardé por un día entero debido a esto. ProcessData: false, contentType: false, y estos dos parámetros de ajax deben escribirse como falsos, las razones específicas se han escrito anteriormente.

flujo de archivo de carga ajax usando formdata

Supongo que te gusta