formData上传图片

---------------------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)

时间: 2024-10-06 22:44:41

formData上传图片的相关文章

&lt;form&gt; multipart/form-data 上传图片

1 <form method="post" enctype="multipart/form-data" id="fileinfo" name="fileinfo" > 2 <input class="input" type="file" name="file"></input> 3 </form> 4 <!--&l

input file图片上传FormData

FormData() 上传图片,转载请注明出处!!! $("#updatepic").on("change", function(e) { var file = e.target.files[0]; var fd = new FormData(); if (file.size < 4194304) { //判断文件大小 fd.append("UserName", "wangteng"); fd.append("

MVC中上传图片文件

MVC的控制器如何获取input(file)的值,将图片保存到项目文件中 View视图中: (1)在xxxx.cshtml中加入表单内容,在<form>中一定要加入enctype="multipart/form-data" 属性 <link rel="stylesheet" type="text/css" href="../../Scripts/bmms_EasyUI/themes/gray/easyui.css&qu

[学习笔记]验证上传文件后缀名类型

<script type="text/javascript" charset="utf-8"> function checkFile(filename){ var flag = false; var arr = ["jpg","png","gif","bmp"]; //取扩展名: var index = filename.indexOf("."); var

django-添加文章&amp;admin后台管理

通过表单形式与后端交互: 前端表单: add.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加文章</title> </head> <body> <form action="/add/" method="post" enc

canvas压缩、裁切图片和格式转换的方法

按照大小压缩图片,或者按照特定分辨率裁切图片,转为blob数据.自动处理ios中可能存在的照片偏差90°问题. 例如,获取300*300大小的头像,实现以下效果: 使用方式: <!-- 引入js文件 --> <script type="text/javascript" src="./compressImage.js"></script> <!-- input标签 --> <input type="fil

使用axios+formdata+vue上传图片遇到后台接受不到图片的值的问题

先直接贴代码 html代码如下: <input type="file"@change="getFileExpr($event)"> <el-form id="uploadForm" :rules="rules2" method="post" enctype="multipart/form-data"> 这个地方我是使用的element ui框架中的form组件 原

【土旦】 使用Vant 的Uploader 上传图片 重定义返回格式 使用FormData格式提交

开发一个图片上传功能 需求要用vant中的Uploader , 发现 Uploader组件官方封装返回的数据是加密的,不适合我这个项目(需要上传到本地ftp服务器), 看了一下官方 issue 发现有人提问 官方有回复 加密数据转 formdata格式的操作, 复制过来发现不行,又搜索了一下度娘,终于解决问题,现在把坑记录一下 官方提供的格式转化(没起效...) 1 const formData = new FormData(); 2 formData.append('file', file);

利用FormData,实现上传图片的添加和删除功能

基于bootstrap前端框架的Html代码如下: <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden