使用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>
相关文章
|
缓存 前端开发 PHP
【超详细】php实现扫码关注微信公众号系统/网站自动注册登录
【超详细】php实现扫码关注微信公众号系统/网站自动注册登录
632 0
|
JavaScript 前端开发
原生JS实现Ajax下载文件
原生JS实现Ajax下载文件
390 0
|
Ubuntu 算法 Linux
怎么解决在vmware虚拟机下ubuntu linux系统重启后不能联网的问题
怎么解决在vmware虚拟机下ubuntu linux系统重启后不能联网的问题
777 0
|
移动开发 JavaScript Android开发
H5 video 自动播放(autoplay)不生效解决方案
H5 video 自动播放(autoplay)不生效解决方案
1235 0
|
监控 小程序 Linux
在Mac上用手机抓包软件Charles抓取微信小程序中的高清无水印视频
手机抓包是一名测试工程师常备的技能,比如我想查看一个接口请求的参数、返回值,还有移动设备上的http请求、https请求,这一次的背景是我们想要在app端和小程序端抓取一些视频,这里用腾讯视频作为例子,使用mac系统的Charles软件(有点类似win系统中的fiddler,使用方式上大同小异)来进行视频接口与地址的抓包和嗅探。
在Mac上用手机抓包软件Charles抓取微信小程序中的高清无水印视频
|
前端开发
div标签中的span标签,多行文字水平,垂直居中
div标签中的span标签,多行文字水平,垂直居中
386 0
|
移动开发 前端开发 JavaScript
在 JavaScript 中播放音频文件
在 JavaScript 中播放音频文件
1243 0
video标签自动播放视频和移动端封面空白问题解决
video标签自动播放视频和移动端封面空白问题解决
1340 0
video标签自动播放视频和移动端封面空白问题解决
|
JavaScript PHP 网络架构
***解决PHP输出多余的空格或换行
用CI框架写APP后台接口的时候,返回的JSON前面有多余的2哥换行,首先排查的是BOM,结果问题依旧 再就是排查 标签外没有多余的回车、换行,结果发现确实有多余的换行,去掉之后,问题消失。 总结:建议去掉PHP结束标签,这样会避免很多莫名其妙的问题     写代码的童鞋应该知道,经常会在...
1585 0
|
Android开发
Android TV开发总结(三)构建一个TV app的焦点控制及遇到的坑
原文:Android TV开发总结(三)构建一个TV app的焦点控制及遇到的坑 版权声明:我已委托“维权骑士”(rightknights.com)为我的文章进行维权行动.转载务必转载所有,且须注明出处。
3400 0