JS-前端实现图片上传

来源：互联网发布：csgo和cf对比知乎编辑：程序博客网时间：2024/05/19 00:09
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <script src="jquery-1.3.2-min.js"></script>  <script type="text/javascript">    $(function(){        var path,clip = $("#image"),FileReader = window.FileReader;        $("#file").change(function() {            if (FileReader) {//chrome浏览器处理                var reader = new FileReader(),                    file = this.files[0];                reader.onload = function(e) {                    clip.attr("src", e.target.result);//这里是把图片转成64位数据存入<img>中的src里                };                reader.readAsDataURL(file);                //这里需要延迟一下，否则无法放入文本框内                setTimeout("showchange()",1000);            }            else {//其他浏览器处理，火狐在这里就不写出来了，网上资料很多                path = $(this).val();                if (/"\w\W"/.test(path)) {                    path = path.slice(1,-1);                }                clip.attr("src",path);            }        });    })    //存入照片数据    function showchange(){            var s1 = $("#image").attr("src");            $("#files").val(s1);    } </script> </head> <body>  照片  <img id="image" src="" width="200" height="200"/><br/>  <input type="file" id="file" accept="image/gif,image/jpeg,image/jpg"><br/>   选择照片后存入64位照片数据<br/>  <textarea rows="10" cols="120" id="files"></textarea><br/>  data:image/jpeg;base64,<br/>  data:图片格式；<br/>  base64:64位;<br/>  ","后面就是64位图片数据格式，传入后台转成2进制就可以写入图片了 </body></html>
效果图
0 0