---------------------formData上传图片---------------------

<form id="imageform">
  <img src="img/user_logo_center.png" class="user_logo"/>
  <i class="change_pho"></i>
  <input type="file" name="photo" accept="image/png,image/gif,image/jpg,image/jpeg" id="change_pho_btn">
<form>

$("#change_pho_btn").on("change",function(){
  var formData = new FormData($( "#imageform" )[0]);

  formData.append("type", "avatar");

  $.ajax({
    url: '',
    type: 'POST',
    data: formData,
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    success: function (data) {
      $('#imageform .user_logo').attr('src',data.img_url);
    },
    error:function(){

    }
  });
})

----------------------获取客户端图片链接--------------------------------

---》必须为文件对象或者BLOB对象(2进制对象)

var img_url=window.URL.createObjectURL($("#upload_pic").get(0).files[0])

$("img").attr("src",img_url)

formData上传图片的更多相关文章

  1. JS中使用FormData上传图片

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  2. formdata 上传图片+进度条

    记得引入jquery //上传进度回调函数:          function progressHandlingFunction(e) {            if (e.lengthComput ...

  3. python接口自动化16-multipart/form-data上传图片

    前言 在提交表单操作的时候,经常会遇到图片上传的操作,图片上传是一个单独的接口,本篇以禅道为例,介绍如何上传图片 上传接口 1.以禅道上提交bug为例,在选择图片时,点确定按钮,就是上传图片了 2.用 ...

  4. python接口自动化-multipart/form-data上传图片

    前言 在提交表单操作的时候,经常会遇到图片上传的操作,图片上传是一个单独的接口,本篇以禅道为例,介绍如何上传图片 上传接口 1.以禅道上提交bug为例,在选择图片时,点确定按钮,就是上传图片了 2.用 ...

  5. httprunner学习25-文件上传multipart/form-data

    前言 httprunner上传文件接口,其实跟requests上传文件的接口是一样的,之前在python接口系列里面有案例 python接口自动化16-multipart/form-data上传图片 ...

  6. 真正解决百度编辑器UEditor上传图片跨域问题

    做前后端分离的项目用到UEditor,把上传图片程序拿出来放到了接口程序中,上传图片接口已经做了跨域处理,按理说编辑器中上传图片应该不会有问题.可是配置好图片上传路径后,运行,打开调试,测试一下,报错 ...

  7. PHP上传图片,路径保存在数据库中,根据图片路径显示图片

    1.创建数据表   CREATE TABLE image( id int(4) unsigned NOT NULL AUTO_INCREMENT, name varchar(100) default ...

  8. 练习JavaScript判断上传文件后缀名

    <script type = text/javascript> function jiance(filename) { var pic = ["jpg","p ...

  9. HTML基础篇之内嵌框架和表单

    内嵌框架: <iframe src="http://www.baidu.com" name="d"></iframe> 网页会显示一个这 ...

随机推荐

  1. 控制台手动编译Qt5程序

    转自:http://www.cnblogs.com/csulennon/p/4479236.html 在上一篇随笔中已经搭建好了Qt5的的开发环境,并且通过Qt Creator自动构建了一个视窗程序. ...

  2. elasticsearch,python包pyes进行的处理

    elasticsearch:高性能搜索引擎,官网:https://www.elastic.co/products/elasticsearch/ 对于它相信大家都不陌生,es的使用已经广泛存在 各大网站 ...

  3. PKU 1007

    题名:DNA排序 题意:给定字符串长度.个数,计算每个字符串的逆序数,然后从大到小排列,有兴趣的可以去看下原题. 计算字符串逆序数,然后排序,这里使用了快速排序算法,string释放的时候竟然有问题, ...

  4. BZOJ 3176 Sort

    先一遍reverse+逆序对个数. 要开long long啊. #include<iostream> #include<cstdio> #include<cstring& ...

  5. -webkit-appearance、sselect

    -webkit-appearance 是一个 不规范的属性(unsupported WebKit property),用来改变按钮和其他控件的外观,使其外观类似于原生控件. iOS下的safari中有 ...

  6. 字符编码详解及由来(UNICODE,UTF-8,GBK)[转帖]

    相信許多人對字符編碼都不是很了解,透過下文可以清晰的理解各种字符编码方式详解及由来. 一直对字符的各种编码方式懵懵懂懂,什么ANSI.UNICODE.UTF-8.GB2312.GBK.DBCS.UCS ...

  7. jQuery学习总结

    1:jQuery是什么 jQuery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库,兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, O ...

  8. Day23_IO第五天

    1.递归求5的阶乘 package com.heima.chario; public class Demo8_Digui { /** * @param args * 递归:方法自己调用自己 * 5! ...

  9. javaEE-----org.springframework.dao.InvalidDataAccessApiUsageException: Write operation

    org.springframework.dao.InvalidDataAccessApiUsageException: Write operations are not allowed in read ...

  10. linux grep

    grep (缩写来自Globally search a Regular Expression and Print) 是一种强大的文本搜 索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来.Uni ...