前端上传图片的方法

前端实习小萌新O(∩_∩)O哈哈~,系统学习过前端课程,做过小项目,以为自己会的还可以,结果真的是实习~实践的时候才知道自己会的还是少啊,前端不易,且行且努力

分享下写的前端上传jpg,bmp,jepg....图片到后台的方法

在此我利用的是form表单的方法

HTML代码如下

1. id="uploader"  onChange={this.doUploader.bind(this)} >

2. type="file" name="file" accept="image/jpeg,image/jpg,image/png"/>

input标签的type类型是HTML5的新特性,accept是文件类型筛选,我这里要传给后台jpeg,jpg,png,所以我就用了这几个啊

还有其他的类型可供选择(#^.^#)(干货如下);

1.accept="application/msexcel"
2.accept="application/msword"
3.accept="application/pdf"
4.accept="application/poscript"
5.accept="application/rtf"
6.accept="application/x-zip-compressed"
7.accept="audio/basic"
8.accept="audio/x-aiff"
9.accept="audio/x-mpeg"
10.accept="audio/x-pn/realaudio"
11.accept="audio/x-waw"
12.accept="image/gif"
13.accept="image/jpeg"
14.accept="image/tiff"
15.accept="image/x-ms-bmp"
16.accept="image/x-photo-cd"
17.accept="image/x-png"
18.accept="image/x-portablebitmap"
19.accept="image/x-portable-greymap"
20.accept="image/x-portable-pixmap"
21.accept="image/x-rgb"
22.accept="text/html"
23.accept="text/plain"
24.accept="video/quicktime"
25.accept="video/x-mpeg2"

26.accept="video/x-msvideo"

设置完这些之后我们需要将拿到的文件发送给后台了

jq代码

doUploader(ev){
    let formData = new FormData();
    formData.append('image',ev.target.files[0]);
    $.ajax({
        type: "post",
        url:  "http://47.94.224.139:8080/iimg/api/saveImg",
        data: formData,
        dataType: 'json',
        processData: false, // 告诉jQuery不要去处理发送的数据
        contentType: false, // 告诉jQuery不要去设置Content-Type请求头
        xhrFields:{withCredentials:true},
        async: true,    //默认是true：异步，false：同步。
        success: (res)=> {
            console.log(data);
        },
        error: (err)=> {
           alert(err)
        },
    });  }

这是我写的ajax请求    

formData是一个主要用于发送表单数据,但是可以独立于使用表单传输的数据。

可以创建一个你自己的FormData对象，然后通过append() 方法向对象中添加键值对;

formData(key,value)

然后然后,后台我们就轻松愉快的传到后台了;