每天推荐有价值的网站, 工具, 课程, 书籍, 文章, 每天凌晨之前发布.
今天来推荐一个免费开源, 无依赖的插件 - Inline Attachment https://github.com/Rovak/InlineAttachment , 使用 Inline Attachment 轻松的实现拖拽和剪切板粘贴上传图片, 看看它动图效果:
图片来源于官网
使用起来很方便, 从 GitHub https://github.com/Rovak/InlineAttachment 上下载 inline-attachment.JS 和 input.inline-attachment.JS 两个文件然后引入就可以.
- <script src="{{asset('js/inline-attachment.js')}}">
- </script>
- <script src="{{asset('js/input.inline-attachment.js')}}">
- </script>
配置 Inline Attachment:
- <script>
- inlineAttachment.editors.input.attachToInput(document.getElementById("content"), {
- uploadUrl:'{{route('upload.images')}}',
- extraParams: {
- '_token': '{{csrf_token()}}',
- },
- onFileUploadResponse: function(xhr) {
- var result = JSON.parse(xhr.responseText),
- filename = result[this.settings.jsonFieldName];
- if (result && filename) {
- var newValue;
- if (typeof this.settings.urlText === 'function') {
- newValue = this.settings.urlText.call(this, filename, result);
- } else {
- newValue = this.settings.urlText.replace(this.filenameTag, filename);
- }
- var text = this.editor.getValue().replace(this.lastValue, newValue);
- this.editor.setValue(text);
- this.settings.onFileUploaded.call(this, filename);
- }
- return false;
- }
- });
- </script>
从代码中我们可以看到, 我们先将其绑定到我们的 textarea 上, 并且我们设置了 uploadUrl 项指定了图片上传地址, 请自行改为自己的后端上传图片地址.
当然好的解决方案可能还有很多, 如果你有更好的推荐, 可以到留言区评论, 把好的方案推荐给更多的人.
来源: http://www.jianshu.com/p/8ba330aca0e8