后端开发|php教程
Laravel 5.1 中基于 Dropzone.js 实现图片拖拽上传及删除功能
后端开发-php教程
注：本教学代码适用于Laravel 5.1版本。
c 综合设计源码下载,vscode怎么外部弹窗,nltk 安装ubuntu,tomcat8080空白,蚂蚱爬虫,php 链接加密,seo需要什么资料,编程接任务赚钱的网站,仿阿里云控制台模板uilzw
php医院管理系统源码,vscode中文,ubuntu取消界面,如何查看tomcat重启,mongodb 存储爬虫,php点击下载代码,第三方优化seolzw
1、概述
Dropzone 是目前最好的免费文件拖拽上传库，它拥有很多特性和选项以便你可以使用多种方式来自定义。
手机html导航源码下载,在ubuntu使用ftp,睫毛爬虫子视频,php允许流程,临沂seo诊断lzw
在Laravel项目集成Dropzone对没有经验的新手来说有点棘手，所以接下来我想你给你们展示最优雅的解决方案。
这篇教学将包括以下内容：
自动 图片 上传 通过Ajax请求从Dropzone预览中直接移除图片上传图片计数器保存完整尺寸图片和图标尺寸版本使用Intervention Image包调整图片尺寸和编码保存图片数据到数据库在服务器端生成唯一的图片名称
如果你还需要上传或裁剪图片，请参考上一篇教学： 在 Laravel 5 中使用 jQuery 插件 Croppic + Intervention Image 实现图片上传和裁剪 。
本教学的完整代码已公开在GitHub上： /codingo-me/dropzone-laravel-image-upload
最终演示效果图如下：
2、项目基本配置
这里我们安装一个新的Laravel应用并创建包含数据库凭证信息的.env文件。
此外我们还要从 /enyo/dropzone/tree/master/dist 下载样式和脚本文件，这些文件存放到 public/packages/dropzone 。
前端我们还是使用Bootstrap，相关文件存放在 public/packages/bootstrap 。
上面已经提到我们要使用Intervention Image扩展包来处理上传图片，并且这里我们会在Blade模板中用到html辅助函数，所以我们需要安装相关依赖，安装Intervention Image请参考： 在 Laravel 5 中集成 Intervention Image 实现对图片的创建、修改和压缩处理 ，而安装html请参考： Laravel 5 中使用 HtmlBuilder 及 URL::asset() 引入站内或站外的 css 和 js 文件 。
3、视图
本教学只包含单个页面用于上传图片，尽管这样我还是喜欢将布局和具体实现页面分开，我们编辑布局文件 layout.blade.php 如下：
Dropzone + Laravel
Upload
@yield(content)
@yield(footer)
接下来我们创建上传图片的视图文件 pages/upload.blade.php ：
@extends(layout)@section(head) {!! HTML::style(/packages/dropzone/dropzone.css) !!}@stop@section(footer) {!! HTML::script(/packages/dropzone/dropzone.js) !!} {!! HTML::script(/assets/js/dropzone-config.js) !!}@stop@section(content)
Images
{!! Form::open([url => route(upload-post), class => dropzone, files=>true, id=> eal-dropzone]) !!}
Drop images in this area
{!! Form::close() !!}Images are uploaded as soon as you drop them Maximum allowed size of image is 8MB
@stop
在上传视图的 head 部分我们引入了Dropzone的默认样式，在 footer 部分我们传递默认的JavaScript文件以及我们自己的Dropzone配置文件。
内容部分包含两个部分，首先是上传表单然后是隐藏的图片预览区域，我是从Dropzone官网下载的预览模板代码，在配置文件中使用这个模板告诉Dropzone哪段HTML用于上传图片预览。
4、Dropzone配置
查看完整的Dropzone配置项列表参考 这里 ，对本项目来说我想从Dropzone一个一个上传文件，因为这样的话我就不需要循环遍历文件上传，并行上传文件数限制为100并且每个文件大小不能超过8M。
每个图片预览都对应一个删除链接，点击该链接Dropzone就会触发 removedfile 事件，该事件会创建上传/删除的Ajax请求，如果响应状态码是200，则对应图片计数器减少。
var photo_counter = 0;Dropzone.options.realDropzone = { uploadMultiple: false, parallelUploads: 100, maxFilesize: 8, previewsContainer: #dropzonePreview, previewTemplate: document.querySelector(#preview-template).innerHTML, addRemoveLinks: true, dictRemoveFile: Remove, dictFileTooBig: Image is bigger than 8MB, // The setting up of the dropzone init:function() { this.on("removedfile", function(file) { $.ajax({type: POST,url: upload/delete,data: {id: file.name},dataType: html,success: function(data){ var rep = JSON.parse(data); if(rep.code == 200) { photo_counter--; $("#photoCounter").text( "(" + photo_counter + ")"); }} }); } ); }, error: function(file, response) { if($.type(response) === "string") var message = response; //dropzone sends its own error messages in string else var message = response.message; file.previewElement.classList.add("dz-error"); _ref = file.previewElement.querySelectorAll("[data-dz-errormessage]"); _results = []; for (_i = 0, _len = _ref.length; _i < _len; _i++) { node = _ref[_i]; _results.push(node.textContent = message); } return _results; }, success: function(file,done) { photo_counter++; $("#photoCounter").text( "(" + photo_counter + ")"); }}
该配置文件底部如果上传成功图片计数器增加。
5、上传逻辑
我习惯将特定逻辑放到Repository类，在本项目中我使用 ImageRepository 这个类，该类存放在 app/Logic/Image/ImageRepository.php 。
目前这个类只做两件事，上传单个文件以及删除指定文件，我们将整个Repository类注入到 ImageController 中：
image = $imageRepository; } public function getUpload() { return view(pages.upload); } public function postUpload() { $photo = Input::all(); $response = $this->image->upload($photo); return $response; } public function deleteUpload() { $filename = Input::get(id); if(!$filename) { return 0; } $response = $this->image->delete( $filename ); return $response; }}
因此对这个控制器而言我需要三个路由：显示上传表单，上传以及删除请求：
Route::get(/, [as => upload, uses => ImageController@getUpload]);Route::post(upload, [as => upload-post, uses =>ImageController@postUpload]);Route::post(upload/delete, [as => upload-remove, uses =>ImageController@deleteUpload]);
ImageController 的 postUpload 方法将用户上传请求转发到 ImageRepository 类对应的 upload 方法。这个 upload 方法首先会验证输入，然后为上传文件分配唯一的文件名，再然后保存原始尺寸图片到指定目录，同时将图标尺寸图片保存到其它目录，此外还要保存到数据库以便Laravel可以跟踪图片上传记录。为此我们需要创建迁移文件并运行迁移命令：
increments(id); $table->text(original_name); $table->text(filename); $table->timestamps(); }); } /*** Reverse the migrations.** @return void*/ public function down() { Schema::drop(images); }}
我已经提过了上传文件将会保存为两种尺寸，此外可能还要生成缩略图并对图片编码，要实现这些功能，我们需要使用Intervention Image扩展包：
fails()) { return Response::json([error => true,message => $validator->messages()->first(),code => 400 ], 400); } $photo = $form_data[file]; $originalName = $photo->getClientOriginalName(); $originalNameWithoutExt = substr($originalName, 0, strlen($originalName) - 4); $filename = $this->sanitize($originalNameWithoutExt); $allowed_filename = $this->createUniqueFilename( $filename ); $filenameExt = $allowed_filename ..jpg; $uploadSuccess1 = $this->original( $photo, $filenameExt ); $uploadSuccess2 = $this->icon( $photo, $filenameExt ); if( !$uploadSuccess1 || !$uploadSuccess2 ) { return Response::json([error => true,message => Server error while uploading,code => 500 ], 500); } $sessionImage = new Image; $sessionImage->filename= $allowed_filename; $sessionImage->original_name = $originalName; $sessionImage->save(); return Response::json([ error => false, code => 200 ], 200); } public function createUniqueFilename( $filename ) { $full_size_dir = Config::get(images.full_size); $full_image_path = $full_size_dir . $filename . .jpg; if ( File::exists( $full_image_path ) ) { // Generate token for image $imageToken = substr(sha1(mt_rand()), 0, 5); return $filename . - . $imageToken; } return $filename; } /*** Optimize Original Image*/ public function original( $photo, $filename ) { $manager = new ImageManager(); $image = $manager->make( $photo )->encode(jpg)->save(Config::get(images.full_size) . $filename ); return $image; } /*** Create Icon From Original*/ public function icon( $photo, $filename ) { $manager = new ImageManager(); $image = $manager->make( $photo )->encode(jpg)->resize(200, null, function($constraint){$constraint->aspectRatio();})->save( Config::get(images.icon_size) . $filename ); return $image; } /*** Delete Image From Session folder, based on original filename*/ public function delete( $originalFilename) { $full_size_dir = Config::get(images.full_size); $icon_size_dir = Config::get(images.icon_size); $sessionImage = Image::where(original_name, like, $originalFilename)->first(); if(empty($sessionImage)) { return Response::json([error => true,code => 400 ], 400); } $full_path1 = $full_size_dir . $sessionImage->filename . .jpg; $full_path2 = $icon_size_dir . $sessionImage->filename . .jpg; if ( File::exists( $full_path1 ) ) { File::delete( $full_path1 ); } if ( File::exists( $full_path2 ) ) { File::delete( $full_path2 ); } if( !empty($sessionImage)) { $sessionImage->delete(); } return Response::json([ error => false, code => 200 ], 200); } function sanitize($string, $force_lowercase = true, $anal = false) { $strip = array("~", "`", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "_", "=", "+", "[", "{", "]", "}", "\\", "|", ";", ":", "\"", "\", "‘", "’", "“", "”", "–", "—", "—", "–", ",", "", "/", "?"); $clean = trim(str_replace($strip, "", strip_tags($string))); $clean = preg_replace(/\s+/, "-", $clean); $clean = ($anal) ? preg_replace("/[^a-zA-Z0-9]/", "", $clean) : $clean ; return ($force_lowercase) ? (function_exists(mb_strtolower)) ?mb_strtolower($clean, UTF-8) :strtolower($clean) : $clean; }}
上传方法会验证 Image 模型中指定的字段规则，目前该规则只是限定上传图片的扩展。
在 upload 方法之后我们使用 reateUniqueFilename 方法为图片返回唯一文件名。
当唯一文件名返回后，我们将图片和对应文件名传递到 original 方法，该方法负责保存完整尺寸图片，对小尺寸图标图片我们使用 icon 方法进行处理。
这两个尺寸图片都保存好了之后，系统会在图片表 images 中创建一条新纪录。
你可能已经注意到了我将图片上传目录存放在了配置文件中，当然你可以自定义存放目录或者直接使用Laravel内置的方法。
env(UPLOAD_FULL_SIZE), icon_size => env(UPLOAD_ICON_SIZE),];
要让应用正常工作还需要将 .env.example 文件拷贝到 .env 文件，并且设置相应的配置值。注意到最后两个配置项的上传目录需要以 / 结尾，以我本地配置为例：
UPLOAD_FULL_SIZE=F:/xampp/htdocs/nonfu/dropzone-laravel-image-upload/public/images/full_size/UPLOAD_ICON_SIZE=F:/xampp/htdocs/nonfu/dropzone-laravel-image-upload/public/images/icon_size/
删除方法接收文件名并检查数据库中是否包含，然后在对应文件在是否存在于指定目录，如果两项都符合则该图片会被删除。
想要更加轻松地使用DropzoneJS实现图片上传，可以使用Laravel扩展包 Dropzoner 。
声明：本文为译文，原文： https://tuts.codingo.me/laravel-5-1-and-dropzone-js-auto-image-uploads-with-removal-links
