web开发关于前端上传图片到服务器

 html:(此处注意,form里面需要使用enctype="multipart/form-data")

    <form enctype="multipart/form-data" method="post" id="uploadForm">

            <inputid="fileBtn"type="file"onchange="upload('#fileBtn','#img');"accept="image/*"capture="camera" />

        <imgsrc="../img/front.png"id="img"/>

    </form>   

 js:

    varimg = document.getElementById("fileBtn").files[0];//获取图片

    传递图片及其他信息,使用formdata传值,传入的值类似于序列化表单的效果,后端通过每个key获取值;

        //图片外的其他属性信息

        varobj= newObject();

        obj.businessType="certficate"

       obj.typeId=typeid 

        obj.sysFromCode="OA"

        obj.sysToCode="sinosecu" 

        //传参数据,包含图片,其他数据     

        varparams1= newFormData();

        params1.append("img",img)//图片

        params1.append("jsonOther",JSON.stringify(obj))


    发起ajax请求,代码如下

                $.ajax({

                      url:URL,//服务端地址

                      type:'POST',

                      dataType:'json',

                     cache:false,

                      async:false,//同步

                    data:params1,//所有的参数

                     processData:false,

                     contentType:false,

                         success:function(data){

 console.log(data);

                            //其他处理

                         },

                        error:function(err) {

                            console.log(err);

                         }

                     });

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容