FormData图片预览上传

最新推荐文章于 2024-04-16 18:52:53 发布

shengmeshi

最新推荐文章于 2024-04-16 18:52:53 发布

阅读量1.3k

点赞数

分类专栏： web前端文章标签： FormData 图片预览上传

本文链接：https://blog.csdn.net/shengmeshi/article/details/76098908

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script src="js/jquery.min.js"></script>
<style>
  #preview{
    width:200px;
    height:200px;
    border:1px solid #ccc;
  }
</style>
 </head>
 <body>

    <input id="uploadImageBtn" name="imageList" type="file" onchange="showImage(this)" style="display: none">
    <div id="imagewrap" class="imagewrap">
      <img src="">
    </div>
    <input class="modify" type="button" value="上传图片" onclick="popSelectImageBox()">
    <input type="button" id="tijiao" value="提交图片">            

<script>
/**
 * 弹出图像选择框
 */
function popSelectImageBox(){
    $("#uploadImageBtn").trigger("click");
}
/**
 * 显示图片预览
 * 上传按钮
 */
function showImage(that){
  var objUrl = getObjectURL(that.files[0]) ;
  if (objUrl) {
     $("#imagewrap>img").attr("src", objUrl);
  }
}
/**
 * 获取上传图片的url
 *file 上传的文件对象
 */
function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
       return url;
}
/**
*上传图片到后端
*/
$("#tijiao").on("click",function(){
  var uploadImageBtn=document.getElementById("uploadImageBtn");
  var data=new FormData();
  data.append("newflies",uploadImageBtn.files[0]);
  console.dir(data.get("newflies"));
});
  </script>
 </body>
</html>