upload-files.blade.php 3.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <div class="sg-upload-image-container-sg" id="sg-{{ $name }}-sg">
  2. <input id="sg-{{ $name }}-input-sg" class="layui-input" name="data[{{ $name }}]" readonly value="{{ $value }}" placeholder="选择文件上传">
  3. <div class="sg-upload-hint-sg">文件小于2M,支持xls,pdf,doc/docx,xls/xlsx格式<span></span></div>
  4. </div>
  5. <script type="text/javascript">
  6. $(function () {
  7. var formContainerHtml;
  8. formContainerHtml = '<div class="sg-upload-image-input-sg" id="sg-{{ $name }}-form-container-sg">\
  9. <form id="sg-{{ $name }}-form-sg" method="POST" enctype="multipart/form-data">\
  10. <input id="sg-{{ $name }}-form-file-sg" type="file" name="files[]" multiple="multiple">\
  11. <input type="text" name="class" value="{{ isset($class) ? $class : "未分类" }}">\
  12. </form>\
  13. </div>';
  14. $('body').append(formContainerHtml);
  15. var id = '#sg-{{ $name }}-sg';
  16. var input = '#sg-{{ $name }}-input-sg';
  17. var form = '#sg-{{ $name }}-form-sg';
  18. var file_input = '#sg-{{ $name }}-form-file-sg';
  19. $(input).on('click', function () {
  20. $(file_input).trigger("click");
  21. });
  22. $(file_input).change(function () {
  23. var formData = new FormData($(form)[0]);
  24. var files = $(file_input)[0].files;
  25. if(files.length !== 0) {
  26. var maxSize = files[0].size;
  27. for(var i = 0; i < files.length; ++i) {
  28. maxSize = Math.max(maxSize, files[i].size);
  29. }
  30. if(maxSize < 200 * 1024 * 1024) {
  31. $(id + ' .sg-upload-hint-sg span').text('上传中...');
  32. $.ajax({
  33. url: '/uploadFile/uploadFiles',
  34. method: 'POST',
  35. processData: false,
  36. contentType: false,
  37. cache: false,
  38. headers: {
  39. 'X-CSRF-TOKEN': "{{ csrf_token() }}"
  40. },
  41. data: formData,
  42. success: function (data) {
  43. if (data.status === 'success') {
  44. $(input).val(data['fileList'].join(','));
  45. $(id + ' .sg-upload-hint-sg span').text('上传成功');
  46. } else {
  47. $(id + ' .sg-upload-hint-sg span').text('上传失败');
  48. }
  49. },
  50. error: function(jqXHR, textStatus, errorThrown) {
  51. $(id + ' .sg-upload-hint-sg span').text('上传失败');
  52. },
  53. complete: function () {
  54. $(id + ' .sg-upload-image-btn-sg').removeClass('sg-uploading');
  55. }
  56. });
  57. }
  58. }
  59. });
  60. });
  61. </script>