使用ajax上传图片

简介: 使用ajax上传图片

html

<div class="cert_img">
      <label>
        <input type="file" name="" onchange="fileImg()" id="certFrom">
        <img src="./img/选择图片.png" alt="" id="certImg">
      </label>
    </div>

css

.cert_img{
        width: 80%;
        height: 170px;
        margin-left: 10px;
      }
      .cert_img input{
        display: none
      }

js

<script>
      function fileImg() {
        var formData = new FormData();
        formData.append("file", $("#certFrom")[0].files[0]);
        $.ajax({
          url: "接口地址",
          type: 'POST',
          data: formData,
          dataType: 'json',
          cache: false,
          processData: false,    //不要处理发送的数据
          contentType: false,    //不要添加请求头
          success: function(data) {
            console.log(data);
            $('#certImg').attr("src",`http://域名+{data.url}`)    //上传图片预览
          },
          error: function(data) {
            console.log(data);
          }
        });
      }
    </script>
相关文章
|
8月前
|
前端开发 JavaScript
使用ajax上传图片
使用ajax上传图片
35 0
|
JavaScript 前端开发
关于jquery ajax上传的坑
processData 默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
52 0
|
JavaScript 前端开发
原生JS实现Ajax下载文件
原生JS实现Ajax下载文件
270 0
|
存储 JSON 前端开发
|
前端开发 JavaScript
【jquery ajax】实现文件上传提交
【jquery ajax】实现文件上传提交
288 0
【jquery ajax】实现文件上传提交
|
XML JSON 前端开发
Ajax:初次认识ajax,ajax使用方法
Ajax:初次认识ajax,ajax使用方法
Ajax:初次认识ajax,ajax使用方法
|
前端开发
ajax图片上传
ajax图片上传
164 0
|
前端开发 Shell 数据安全/隐私保护
|
前端开发
Ajax下载文件
var download = function (url) { $('').css({ display: 'none', width: 0, height: 0 }).
1866 0