---------------------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. Scrum领取任务

    这次主要讨论了产品的构造流程,怎么将任务分配到个人,讨论什么功能具体怎么实现,然后各自选取了任务. 在团队项目“广商百货”的SCRUM项目中我认领的任务是对登录功能的实现.现在还没正式开始,还在看书和 ...

  2. java 多线程

    1.继承Thread类实现多线程继承Thread类的方法尽管被我列为一种多线程实现方式,但Thread本质上也是实现了Runnable接口的一个实例,它代表一个线程的实例,并且,启动线程的唯一方法就是 ...

  3. 解决ie6 fixed 定位以及抖动问题

    像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...

  4. Cardinal样条曲线的Javascript实现(理论篇)

    首先,要对样条曲线进行插值的原因是:希望通过给定的关键帧点生成一条希望的直线或者曲线. 1.直线插值 生成一条直线,给定直线首尾的关键点P0,P1,就能确定这条直线的特性,比如y=kx+b中的斜率k和 ...

  5. Hello World!

    博客园的效率真是高啊,开通博客的申请刚刚递交几分钟就通过了,赞一下博客园的程序员们,这么晚还在工作! 博客主要用来记录自己学习HTML5.CSS.PHP等web前端技术的经历,因为是初学者,所以发的文 ...

  6. Android环境虚拟WINDOWS系统

    参考文档:http://bbs.anzhi.com/thread-5120526-1-1.html 我们知道安卓手机是arm平台,windows是x86平台,指令集完全不同,但在这里要教给大家的是靠软 ...

  7. Unity3D教程:茄子童萌會

    http://s.epb.idv.tw/han-shi-ku/unity Unity 0000 Unity3D學習之路 - C#學習筆記(一) 0001 Unity3D學習之路 - C#學習筆記(二) ...

  8. 黑马----面向方面编程AOP

    黑马程序员:Java培训.Android培训.iOS培训..Net培训 JAVA反射-面向方面编程AOP 一.面向方面的需求 有如下模型: 需要统计客户登录时间.使用系统情况,或系统运行日记等信息时, ...

  9. java mail使用qq邮箱发邮件的配置方法

    最近自己折腾了下Java中利用mai发送QQ邮件 1.QQ邮箱设置 1.1 进去QQ邮箱-->设置-->账号-->进行设置如下图 2.foxmail设置(由于我要利用它收邮件) 2. ...

  10. nginx 之 grok 过滤

    简介   前面我们的nginx日志编码使用的json,logstash直接输入预定义好的 JSON 数据,这样就可以省略掉 filter/grok 配置,但是在我们的生产环境中,日志格式往往使用的是普 ...