在写项目的时候，遇到了上传照片的功能，根据项目的需要，有很多种写法，有些需要上传之前对图片进行裁剪，有些直接上传到页面预览即可，再次之前，用过插件写了两次。用到的都是不同的插件，今天用jquery直接写了一个简单的功能。
<!DOCTYPE HTML> <html> <head> <title>新增地图配置</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <style> #img { width: 100px; height: 100px; } </style> </head> <body> <form id="dialogForm"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="form-group"> <label class="col-md-3 col-sm-3 col-xs-3 control-label">图标</label> <div class="col-md-6 col-sm-6 col-xs-6"> <img src="" id="img" class="hide"> <input type="file" name="file" id="file" multiple="multiple" /> </div> </div> </div> </div> </form> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script> $("#file").change(function() { var objUrl = getObjectURL(this.files[0]); if(objUrl) { $("#img").attr("src", objUrl); $("#img").removeClass("hide"); } }); //建立一个可存取到file的url function getObjectURL(file) { var url = null; url = window.webkitURL.createObjectURL(file); return url; } </script> </body> </html>
关于浏览器兼容问题，上面写道的是在谷歌浏览器可用，要在火狐ie浏览器里面同样适用只需要在代码里面加上一段适配的代码，判断使用哪个浏览器打开即可。
//建立一个可存取到file的url function getObjectURL(file) { var url = null ; url = window.webkitURL.createObjectURL(file) ; 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 } return url ; }
