修复同个页面下文件上传表单会出现重复上传bug

resources/assets/dcat-admin/upload.js

@@ -1,8 +1,8 @@
 (function ($) {
     function Uploader(opts) {
         opts = $.extend({
-            wrapper: '#uploader', // 图片显示容器选择器
-            addFileButton: '#add-file-button', // 继续添加按钮选择器
+            wrapper: '.web-uploader', // 图片显示容器选择器
+            addFileButton: '.add-file-button', // 继续添加按钮选择器
             isImage: false,
             preview: [], // 数据预览
             deleteUrl: '',
@@ -61,8 +61,9 @@
             }
         }, opts);
 
-        var updateColumn = opts.upload.formData.upload_column || ('webup' + Math.floor(Math.random()*10000));
-        var elementName = opts.elementName;
+        var $selector = $(opts.selector),
+            updateColumn = opts.upload.formData.upload_column || ('webup' + Math.floor(Math.random()*10000)),
+            elementName = opts.elementName;
 
         if (typeof opts.upload.formData._id == "undefined" || !opts.upload.formData._id) {
             opts.upload.formData._id = updateColumn + Math.floor(Math.random()*10000);
@@ -94,7 +95,7 @@
             originalFilesNum = LA.len(opts.preview),
 
             // 上传表单
-            $input = $('input[name="' + elementName + '"]'),
+            $input = $selector.find('input[name="' + elementName + '"]'),
 
             // 获取文件视图选择器
             getFileViewSelector = function (fileId) {
@@ -414,7 +415,7 @@
                     text = __('selected_has_failed', {success: stats.successNum, fail: stats.uploadFailNum});
                 }
             } else {
-               showSuccess();
+                showSuccess();
             }
 
             function showSuccess() {
@@ -477,7 +478,7 @@
 
                 case 'ready':
                     $placeHolder.addClass('element-invisible');
-                    $(addFileButtonSelector).removeClass('element-invisible');
+                    $selector.find(addFileButtonSelector).removeClass('element-invisible');
                     $queue.show();
                     if (!opts.disabled) {
                         $statusBar.removeClass('element-invisible');
@@ -490,7 +491,7 @@
                     break;
 
                 case 'uploading':
-                    $(addFileButtonSelector).addClass('element-invisible');
+                    $selector.find(addFileButtonSelector).addClass('element-invisible');
                     $progress.show();
                     $upload.text(__('pause_upload'));
                     break;
@@ -503,7 +504,7 @@
                 case 'confirm':
                     if (uploader) {
                         $progress.hide();
-                        $(addFileButtonSelector).removeClass('element-invisible');
+                        $selector.find(addFileButtonSelector).removeClass('element-invisible');
                         $upload.text(__('start_upload'));
 
                         stats = uploader.getStats();
@@ -734,7 +735,7 @@
 
         // 初始化web-uploader
         function build() {
-            $wrap = $(opts.wrapper);
+            $wrap = $selector.find(opts.wrapper);
 
             // 图片容器
             $queue = $('<ul class="filelist"></ul>').appendTo($wrap.find('.queueList'));

resources/views/form/file.blade.php

@@ -1,7 +1,4 @@
-@php
-   $random = \Illuminate\Support\Str::random(8);
-@endphp
-<div class="{{$viewClass['form-group']}} {!! !$errors->has($errorKey) ? '' : 'has-error' !!}">
+<div id="{{$_id}}" class="{{$viewClass['form-group']}} {!! !$errors->has($errorKey) ? '' : 'has-error' !!}">
 
     <label for="{{$column}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
 
@@ -11,10 +8,10 @@
 
         <input name="{{$name}}" id="{{$id}}" type="hidden" />
 
-        <div class="web-uploader {{$_files}}" id="web-uploader-{{$random}}" style="">
+        <div class="web-uploader {{$_files}}"  style="">
             <div class="queueList">
-                <div id="dnd-area-{{$random}}" class="placeholder">
-                    <div id="file-picker-{{$random}}"></div>
+                <div class="placeholder dnd-area">
+                    <div class="file-picker"></div>
                     <p>{{trans('admin.uploader.drag_file')}}</p>
                 </div>
             </div>
@@ -24,7 +21,7 @@
                 </div>
                 <div class="info"></div>
                 <div class="btns">
-                    <div id="add-file-{{$random}}" class="add-file-button"></div> &nbsp;
+                    <div class="add-file-button"></div> &nbsp;
                     <div class="uploadBtn btn btn-primary"><i class="fa fa-upload"></i> &nbsp;{{trans('admin.upload')}}</div>
                 </div>
             </div>
@@ -42,17 +39,16 @@ LA.ready(function () {
 
     function init() {
         var opts = $.extend({
-            wrapper: '#web-uploader-{{$random}}',
-            addFileButton: '#add-file-{{$random}}',
+            selector: '#{{$_id}}',
         }, options);
 
         opts.upload = $.extend({
             pick: {
-                id: '#file-picker-{{$random}}',
+                id: '#{{$_id}} .file-picker',
                 label: '<i class="glyphicon glyphicon-folder-open"></i>&nbsp; {{trans('admin.uploader.add_new_media')}}'
             },
-            dnd: '#dnd-area-{{$random}}',
-            paste: '#web-uploader-{{$random}}'
+            dnd: '#{{$_id}} .dnd-area',
+            paste: '#{{$_id}} .web-uploader'
         }, opts);
 
         upload = LA.Uploader(opts);

src/Form/Field/File.php

@@ -6,6 +6,7 @@ use Dcat\Admin\Form\Field;
 use Dcat\Admin\Support\Helper;
 use Illuminate\Support\Arr;
 use Illuminate\Support\Facades\Validator;
+use Illuminate\Support\Str;
 use Symfony\Component\HttpFoundation\File\UploadedFile;
 
 class File extends Field
@@ -174,6 +175,7 @@ class File extends Field
         $this->addVariables([
             'options' => json_encode($this->options),
             '_files' => $this->options['isImage'] ? '' : '_files',
+            '_id' => 'file-'.Str::random(8),
         ]);
 
         return parent::render();

src/Form/Field/WebUploader.php

@@ -4,10 +4,11 @@ namespace Dcat\Admin\Form\Field;
 
 use Dcat\Admin\Admin;
 use Dcat\Admin\Form;
-use Illuminate\Support\Facades\Storage;
 use Illuminate\Support\Facades\URL;
-use Symfony\Component\HttpFoundation\File\UploadedFile;
 
+/**
+ * @property Form $form
+ */
 trait WebUploader
 {
     /**