FormData图片预览上传

来源：互联网发布：淘宝特卖9.9 编辑：程序博客网时间：2024/05/22 07:57
<!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>
结果：
这里写图片描述
阅读全文
0 0