如何在jQuery和Laravel中使用一个输入字段上传多个图像和文件,并进行预览。

huangapple go评论100阅读模式
英文:

How to upload Multiple Images and Files in one input field with Preview in jquery and Laravel

问题

  1. <div class="col-lg-12 mt-4">
  2. <label for="file">{{ __('上传收据/账单(多个文件)') }}</label>
  3. <div class="upload__box">
  4. <div class="upload__btn-box">
  5. <label class="upload__btn">
  6. {{ __('上传账单') }}
  7. <input type="file" multiple="" id="files" name="files[]" data-max_length="20" class="upload__inputfile" accept="image/jpeg, image/jpg, image/png, application/pdf">
  8. </label>
  9. </div>
  10. <div class="upload__img-wrap"></div>
  11. </div>
  12. </div>

I'm trying to upload Multiple Images and Files with preview and cancel but unable to find any way to do so.

英文:
  1. &lt;div class=&quot;col-lg-12 mt-4&quot;&gt;
  2. &lt;label for=&quot;file&quot;&gt;{{ __(&#39;Upload Receipts/Bills (Multiple Document)&#39;) }}&lt;/label&gt;
  3. &lt;div class=&quot;upload__box&quot;&gt;
  4. &lt;div class=&quot;upload__btn-box&quot;&gt;
  5. &lt;label class=&quot;upload__btn&quot;&gt;
  6. {{__(&#39;Upload Bills&#39;)}}
  7. &lt;input type=&quot;file&quot; multiple=&quot;&quot; id=&quot;files&quot; name=&quot;files[]&quot; data-max_length=&quot;20&quot; class=&quot;upload__inputfile&quot; accept=&quot;image/jpeg, image/jpg, image/png, application/pdf&quot;&gt;
  8. &lt;/label&gt;
  9. &lt;/div&gt;
  10. &lt;div class=&quot;upload__img-wrap&quot;&gt;&lt;/div&gt;
  11. &lt;/div&gt;
  12. &lt;/div&gt;

I'm trying to upload Multiple Images and Files with preview and cancel but unable to find any way to do so.

答案1

得分: 1

  1. $(document).ready(function () {
  2. ImgUpload();
  3. function ImgUpload() {
  4. var imgWrap = "";
  5. var imgArray = [];
  6. $('.upload__inputfile').each(function () {
  7. $(this).on('change', function (e) {
  8. imgWrap = $(this).closest('.upload__box').find('.upload__img-wrap');
  9. var maxLength = $(this).attr('data-max_length');
  10. var files = e.target.files;
  11. var filesArr = Array.prototype.slice.call(files);
  12. var iterator = 0;
  13. filesArr.forEach(function (f, index) {
  14. // if (!f.type.match('image.*')) {
  15. // return;
  16. // }
  17. if (imgArray.length > maxLength) {
  18. return false
  19. } else {
  20. var len = 0;
  21. for (var i = 0; i < imgArray.length; i++) {
  22. if (imgArray[i] !== undefined) {
  23. len++;
  24. }
  25. }
  26. if (len > maxLength) {
  27. return false;
  28. } else {
  29. imgArray.push(f);
  30. var reader = new FileReader();
  31. reader.onload = function (e) {
  32. console.log(f.type);
  33. if (f.type == 'application/pdf') {
  34. var html = "<div class='upload__img-box'><div style='background-image: url(" + e.target.result + ")' data-number='" + $(".upload__img-close").length + "' data-file='" + f.name + "' class='img-bg ' ><div class='upload__img-close'></div><img src='https://cdn-icons-png.flaticon.com/128/337/337946.png'></div></div>";
  35. } else {
  36. var html = "<div class='upload__img-box'><div style='background-image: url(" + e.target.result + ")' data-number='" + $(".upload__img-close").length + "' data-file='" + f.name + "' class='img-bg ' ><div class='upload__img-close'></div></div></div>";
  37. }
  38. imgWrap.append(html);
  39. iterator++;
  40. }
  41. reader.readAsDataURL(f);
  42. }
  43. }
  44. });
  45. });
  46. });
  47. $('body').on('click', ".upload__img-close", function (e) {
  48. var file = $(this).parent().data("file");
  49. for (var i = 0; i < imgArray.length; i++) {
  50. if (imgArray[i].name === file) {
  51. imgArray.splice(i, 1);
  52. break;
  53. }
  54. }
  55. $(this).parent().parent().remove();
  56. $(this).parent().children().remove();
  57. });
  58. }
  59. });
  1. <style>
  2. .upload__box {
  3. padding-top: 10px;
  4. }
  5. .upload__inputfile {
  6. width: 0.1px;
  7. height: 0.1px;
  8. opacity: 0;
  9. overflow: hidden;
  10. position: absolute;
  11. z-index: -1;
  12. }
  13. .upload__btn {
  14. display: inline-block;
  15. font-weight: 600;
  16. color: #fff;
  17. text-align: center;
  18. min-width: 116px;
  19. padding: 5px;
  20. transition: all 0.3s ease;
  21. cursor: pointer;
  22. border: 2px solid;
  23. background-color: #4045ba;
  24. border-color: #4045ba;
  25. border-radius: 10px;
  26. line-height: 26px;
  27. font-size: 14px;
  28. }
  29. .upload__btn:hover {
  30. background-color: unset;
  31. color: #4045ba;
  32. transition: all 0.3s ease;
  33. }
  34. .upload__btn-box {
  35. margin-bottom: 0px;
  36. }
  37. .upload__img-wrap {
  38. display: flex;
  39. flex-wrap: wrap;
  40. margin: 0 -10px;
  41. }
  42. .upload__img-box {
  43. width: 200px;
  44. padding: 0 10px;
  45. margin-bottom: 0px;
  46. }
  47. .upload__img-close {
  48. width: 24px;
  49. height: 24px;
  50. border-radius: 50%;
  51. background-color: rgba(0, 0, 0, 0.5);
  52. position: absolute;
  53. top: 10px;
  54. right: 10px;
  55. text-align: center;
  56. line-height: 24px;
  57. z-index: 1;
  58. cursor: pointer;
  59. }
  60. .upload__img-close:after {
  61. content: '✖';
  62. font-size: 14px;
  63. color: white;
  64. }
  65. .img-bg {
  66. background-repeat: no-repeat;
  67. background-position: center;
  68. background-size: cover;
  69. position: relative;
  70. padding-bottom: 100%;
  71. }
  72. </style>
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <form action="">
  3. <div class="col-lg-12 mt-4">
  4. <label for="file">Upload Document (Multiple Document)</label>
  5. <div class="upload__box">
  6. <div class="upload__btn-box">
  7. <label class="upload__btn">
  8. Upload file
  9. <input type="file" multiple="" id="files" name="files[]" data-max_length="20" class="upload__inputfile" accept="image/jpeg, image/jpg, image/png, application/pdf">
  10. </label>
  11. </div>
  12. <div class="upload__img-wrap"></div>
  13. </div>
  14. </div>
  15. </form>
英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. $(document).ready(function () {
  2. ImgUpload();
  3. function ImgUpload() {
  4. var imgWrap = &quot;&quot;;
  5. var imgArray = [];
  6. $(&#39;.upload__inputfile&#39;).each(function () {
  7. $(this).on(&#39;change&#39;, function (e) {
  8. imgWrap = $(this).closest(&#39;.upload__box&#39;).find(&#39;.upload__img-wrap&#39;);
  9. var maxLength = $(this).attr(&#39;data-max_length&#39;);
  10. var files = e.target.files;
  11. var filesArr = Array.prototype.slice.call(files);
  12. var iterator = 0;
  13. filesArr.forEach(function (f, index) {
  14. // if (!f.type.match(&#39;image.*&#39;)) {
  15. // return;
  16. // }
  17. if (imgArray.length &gt; maxLength) {
  18. return false
  19. } else {
  20. var len = 0;
  21. for (var i = 0; i &lt; imgArray.length; i++) {
  22. if (imgArray[i] !== undefined) {
  23. len++;
  24. }
  25. }
  26. if (len &gt; maxLength) {
  27. return false;
  28. } else {
  29. imgArray.push(f);
  30. var reader = new FileReader();
  31. reader.onload = function (e) {
  32. console.log(f.type);
  33. if (f.type == &#39;application/pdf&#39;) {
  34. var html = &quot;&lt;div class=&#39;upload__img-box&#39;&gt;&lt;div style=&#39;background-image: url(&quot; + e.target.result + &quot;)&#39; data-number=&#39;&quot; + $(&quot;.upload__img-close&quot;).length + &quot;&#39; data-file=&#39;&quot; + f.name + &quot;&#39; class=&#39;img-bg&#39; &gt;&lt;div class=&#39;upload__img-close&#39;&gt;&lt;/div&gt;&lt;img src=&#39;https://cdn-icons-png.flaticon.com/128/337/337946.png&#39;&gt;&lt;/div&gt;&lt;/div&gt;&quot;;
  35. } else {
  36. var html = &quot;&lt;div class=&#39;upload__img-box&#39;&gt;&lt;div style=&#39;background-image: url(&quot; + e.target.result + &quot;)&#39; data-number=&#39;&quot; + $(&quot;.upload__img-close&quot;).length + &quot;&#39; data-file=&#39;&quot; + f.name + &quot;&#39; class=&#39;img-bg&#39;&gt;&lt;div class=&#39;upload__img-close&#39;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&quot;;
  37. }
  38. imgWrap.append(html);
  39. iterator++;
  40. }
  41. reader.readAsDataURL(f);
  42. }
  43. }
  44. });
  45. });
  46. });
  47. $(&#39;body&#39;).on(&#39;click&#39;, &quot;.upload__img-close&quot;, function (e) {
  48. var file = $(this).parent().data(&quot;file&quot;);
  49. for (var i = 0; i &lt; imgArray.length; i++) {
  50. if (imgArray[i].name === file) {
  51. imgArray.splice(i, 1);
  52. break;
  53. }
  54. }
  55. $(this).parent().parent().remove();
  56. $(this).parent().children().remove();
  57. });
  58. }
  59. });

<!-- language: lang-css -->
<style>
.upload__box {
padding-top: 10px;
}

  1. .upload__inputfile {
  2. width: 0.1px;
  3. height: 0.1px;
  4. opacity: 0;
  5. overflow: hidden;
  6. position: absolute;
  7. z-index: -1;
  8. }
  9. .upload__btn {
  10. display: inline-block;
  11. font-weight: 600;
  12. color: #fff;
  13. text-align: center;
  14. min-width: 116px;
  15. padding: 5px;
  16. transition: all 0.3s ease;
  17. cursor: pointer;
  18. border: 2px solid;
  19. background-color: #4045ba;
  20. border-color: #4045ba;
  21. border-radius: 10px;
  22. line-height: 26px;
  23. font-size: 14px;
  24. }
  25. .upload__btn:hover {
  26. background-color: unset;
  27. color: #4045ba;
  28. transition: all 0.3s ease;
  29. }
  30. .upload__btn-box {
  31. margin-bottom: 0px;
  32. }
  33. .upload__img-wrap {
  34. display: flex;
  35. flex-wrap: wrap;
  36. margin: 0 -10px;
  37. }
  38. .upload__img-box {
  39. width: 200px;
  40. padding: 0 10px;
  41. margin-bottom: 0px;
  42. }
  43. .upload__img-close {
  44. width: 24px;
  45. height: 24px;
  46. border-radius: 50%;
  47. background-color: rgba(0, 0, 0, 0.5);
  48. position: absolute;
  49. top: 10px;
  50. right: 10px;
  51. text-align: center;
  52. line-height: 24px;
  53. z-index: 1;
  54. cursor: pointer;
  55. }
  56. .upload__img-close:after {
  57. content: &#39;\2716&#39;;
  58. font-size: 14px;
  59. color: white;
  60. }
  61. .img-bg {
  62. background-repeat: no-repeat;
  63. background-position: center;
  64. background-size: cover;
  65. position: relative;
  66. padding-bottom: 100%;
  67. }

</style>
<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;form action=&quot;&quot;&gt;
  3. &lt;div class=&quot;col-lg-12 mt-4&quot;&gt;
  4. &lt;label for=&quot;file&quot;&gt;Upload Document (Multiple Document)&lt;/label&gt;
  5. &lt;div class=&quot;upload__box&quot;&gt;
  6. &lt;div class=&quot;upload__btn-box&quot;&gt;
  7. &lt;label class=&quot;upload__btn&quot;&gt;
  8. Upload file
  9. &lt;input type=&quot;file&quot; multiple=&quot;&quot; id=&quot;files&quot; name=&quot;files[]&quot; data-max_length=&quot;20&quot; class=&quot;upload__inputfile&quot; accept=&quot;image/jpeg, image/jpg, image/png, application/pdf&quot;&gt;
  10. &lt;/label&gt;
  11. &lt;/div&gt;
  12. &lt;div class=&quot;upload__img-wrap&quot;&gt;&lt;/div&gt;
  13. &lt;/div&gt;
  14. &lt;/div&gt;
  15. &lt;/form&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月19日 17:46:53
  • 转载请务必保留本文链接:https://go.coder-hub.com/76505445.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定