使用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>

希望对你有所帮助,谢谢观看! >w<;;

目录
相关文章
|
8月前
jq+ajax上传图片信息
jq+ajax上传图片信息
34 1
|
前端开发
ajax 通过move_uploaded_file函数上传图片获取$_FILES['file']对象的属性内容
ajax 通过move_uploaded_file函数上传图片获取$_FILES['file']对象的属性内容
64 0
|
前端开发
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
113 0
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
|
前端开发 Shell 数据安全/隐私保护
|
JavaScript 前端开发 .NET
|
前端开发 容器
fileapi ajax上传图片显示
fileapi,加载图片,并且显示。 先new 一个fileReader。 主要方法 // try sending var reader = new FileReader(); reader.
974 0
|
存储 前端开发 缓存
jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo
最近在论坛中看到,在使用html5中上传图片或文件,出现各种问题。这一方面,我也一直没有做过,今天就抽出了一点时间来学习一下。现在的示例已经ok了,我就给大家分享一下,希望对大家有帮助。<br> 好吧,我们先看看效果截图吧:<br><img src="http://img.blog.csdn.net/20140623113700953?watermark/2/text/aHR0cDovL
1426 0
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
98 0
|
9月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
215 0