在写项目的时候, 遇到了上传照片的功能, 根据项目的需要, 有很多种写法, 有些需要上传之前对图片进行裁剪, 有些直接上传到页面预览即可, 再次之前, 用过插件写了两次. 用到的都是不同的插件, 今天用 jQuery 直接写了一个简单的功能.
Bootstrap+fileinput 插件实现可预览上传照片功能
https://www.jianshu.com/p/8df97db49798
这个插件的思路是在上传图片的时候就把图片存到服务器的根目录里面, 给前端返回一个 url 即可.
基于 cropper.JS 的图片上传和裁剪
https://www.jianshu.com/p/f9986bd52ec6
- <!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 = Windows.webkitURL.createObjectURL(file);
- return url;
- }
- </script>
- </body>
- </HTML>
关于浏览器兼容问题, 上面写道的是在谷歌浏览器可用, 要在火狐 IE 浏览器里面同样适用只需要在代码里面加上一段适配的代码, 判断使用哪个浏览器打开即可.
- // 建立一个可存取到 file 的 url
- function getObjectURL(file)
- {
- var url = null ;
- url = Windows.webkitURL.createObjectURL(file) ;
- if (Windows.createObjectURL!=undefined)
- { // basic
- url = Windows.createObjectURL(file) ;
- }
- else if (Windows.URL!=undefined)
- {
- // mozilla(Firefox)
- url = Windows.URL.createObjectURL(file) ;
- }
- else if (Windows.webkitURL!=undefined) {
- // webkit or Chrome
- }
- return url ;
- }
来源: http://www.jianshu.com/p/f65e1c36bdd0