upimg.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <link rel="stylesheet" href="/static/jqueryFileUpload/style.css">
  2. <script src="/static/jqueryFileUpload/jquery.ui.widget.js"></script>
  3. <script src="/static/jqueryFileUpload/jquery.iframe-transport.js"></script>
  4. <script src="/static/jqueryFileUpload/jquery.fileupload.js"></script>
  5. <script src="/static/ddsort/ddsort.min.js"></script>
  6. <div>
  7. <a href="javascript:;" class="btn btn-primary btn-sm jqfivefile" type="button">
  8. <span id="imgUpload_name_{$name}n2">上传图片</span><span id="progress_{$name}n2"></span>
  9. <input id="imgUpload_{$name}n2" name="files" type="file" title="上传图片" accept="image/*" data-url="{:url('File/upimg')}" />
  10. </a>
  11. <div id="imgsbox_{$name}n2" class="imgsbox">
  12. </div>
  13. {if condition="!isset($type) || $type eq 0")}
  14. <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 仅支持.jpg.jpeg.png后缀的图片;文件大小不超过5M。</span>
  15. {/if}
  16. </div>
  17. <script>
  18. $(function(){
  19. var imgs = '{$val}';
  20. var multi = parseInt('{$multi}');
  21. var name = "{$name}";
  22. imgs = imgs?imgs.split(','):[];
  23. var maxfiles = parseInt(<?php echo isset($max)?$max:20;?>);
  24. let initstr = '';
  25. for (let i in imgs){
  26. initstr += '<div class="imgbox">';
  27. initstr += '<div class="removePic" ontouchstart="removePic(this)">×</div>';
  28. if(multi){
  29. initstr += '<input type="hidden" name="'+name+'[]" value="' + imgs[i] + '">';
  30. }else{
  31. initstr += '<input type="hidden" name="'+name+'" value="' + imgs[i] + '">';
  32. }
  33. initstr += '<img onclick="open_img(this)" src="' + imgs[i] + '">';
  34. initstr += '</div>';
  35. }
  36. if(multi){
  37. $("#imgsbox_{$name}n2").append(initstr);
  38. }else{
  39. $("#imgsbox_{$name}n2").html(initstr);
  40. }
  41. if(multi){
  42. name = name+'[]';
  43. $("#imgUpload_{$name}n2").attr('multiple','multiple');
  44. }else{
  45. $("#imgUpload_{$name}n2").removeAttr('multiple');
  46. }
  47. $("#imgUpload_{$name}n2").fileupload({
  48. dataType: 'json',
  49. done: function (e, data) {
  50. if (data.result && data.result.code == 0) {
  51. var img = '<div class="imgbox">';
  52. img += '<div class="removePic" ontouchstart="removePic(this)">×</div>';
  53. img += '<input type="hidden" name="'+name+'" value="' + data.result.data.path + '">';
  54. img += '<img onclick="open_img(this)" src="' + data.result.data.path + '">';
  55. img += '</div>';
  56. if(multi){
  57. $("#imgsbox_{$name}n2").append(img);
  58. }else{
  59. $("#imgsbox_{$name}n2").html(img);
  60. }
  61. } else {
  62. layer.msg(data.result.message);
  63. }
  64. },
  65. change: function (e, data) {
  66. var fs = $('.imgbox').size();
  67. var hjfiles = fs + data.files.length;
  68. if(hjfiles > maxfiles){
  69. layer.msg('最多只能上传'+maxfiles+'个图片');
  70. return false;
  71. }
  72. $("#imgUpload_name_{$name}n2").html('上传图片...');
  73. },
  74. progressall: function (e, data) {
  75. var progressnum = parseInt(data.loaded / data.total * 100);
  76. if (progressnum == 100) {
  77. $("#progress_{$name}n2").text('');
  78. $("#imgUpload_name_{$name}n2").html('上传图片');
  79. } else {
  80. $("#progress_{$name}n2").text(progressnum + "%");
  81. }
  82. },
  83. error: function(e,data){
  84. layer.msg('上传请求失败');
  85. }
  86. });
  87. $( '#imgsbox_{$name}n2' ).DDSort({
  88. target: 'div',
  89. floatStyle: {
  90. 'border': '1px solid #ccc',
  91. 'background-color': '#fff'
  92. }
  93. });
  94. });
  95. /**
  96. * 移除图片
  97. */
  98. function removePic(_self){
  99. $(_self).parent().remove();
  100. }
  101. </script>