upload.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. function DragImgUpload(id,options) {
  2. this.me = $(id);
  3. var defaultOpt = {
  4. boxWidth:'200px',
  5. boxHeight:'auto'
  6. }
  7. this.preview = $('<div id="preview"><img src="img/upload.png" class="img-responsive" style="width: 100%;height: auto;" alt="" title=""> </div>');
  8. this.opts=$.extend(true, defaultOpt,{
  9. }, options);
  10. this.init();
  11. this.callback = this.opts.callback;
  12. }
  13. //定义原型方法
  14. DragImgUpload.prototype = {
  15. init:function () {
  16. this.me.append(this.preview);
  17. this.me.append(this.fileupload);
  18. this.cssInit();
  19. this.eventClickInit();
  20. },
  21. cssInit:function () {
  22. this.me.css({
  23. 'width':this.opts.boxWidth,
  24. 'height':this.opts.boxHeight,
  25. 'border':'1px solid #cccccc',
  26. 'padding':'10px',
  27. 'cursor':'pointer'
  28. })
  29. this.preview.css({
  30. 'height':'100%',
  31. 'overflow':'hidden'
  32. })
  33. },
  34. onDragover:function (e) {
  35. e.stopPropagation();
  36. e.preventDefault();
  37. e.dataTransfer.dropEffect = 'copy';
  38. },
  39. onDrop:function (e) {
  40. var self = this;
  41. e.stopPropagation();
  42. e.preventDefault();
  43. var fileList = e.dataTransfer.files; //获取文件对象
  44. // do something upload
  45. if(fileList.length == 0){
  46. return false;
  47. }
  48. //检测文件是不是图片
  49. if(fileList[0].type.indexOf('image') === -1){
  50. alert("您拖的不是图片!");
  51. return false;
  52. }
  53. //拖拉图片到浏览器,可以实现预览功能
  54. var img = window.URL.createObjectURL(fileList[0]);
  55. var filename = fileList[0].name; //图片名称
  56. var filesize = Math.floor((fileList[0].size)/1024);
  57. if(filesize>500){
  58. alert("上传大小不能超过500K.");
  59. return false;
  60. }
  61. self.me.find("img").attr("src",img);
  62. self.me.find("img").attr("title",filename);
  63. if(this.callback){
  64. this.callback(fileList);
  65. }
  66. },
  67. eventClickInit:function () {
  68. var self = this;
  69. this.me.unbind().click(function () {
  70. self.createImageUploadDialog();
  71. })
  72. /*
  73. var dp = this.me[0];
  74. dp.addEventListener('dragover', function(e) {
  75. self.onDragover(e);
  76. });
  77. dp.addEventListener("drop", function(e) {
  78. self.onDrop(e);
  79. });
  80. */
  81. },
  82. onChangeUploadFile:function () {
  83. var fileInput = this.fileInput;
  84. var files = fileInput.files;
  85. var file = files[0];
  86. var img = window.URL.createObjectURL(file);
  87. var filename = file.name;
  88. this.me.find("img").attr("src",img);
  89. this.me.find("img").attr("title",filename);
  90. if(this.callback){
  91. this.callback(files);
  92. }
  93. },
  94. createImageUploadDialog:function () {
  95. var fileInput = this.fileInput;
  96. if (!fileInput) {
  97. //创建临时input元素
  98. fileInput = document.createElement('input');
  99. //设置input type为文件类型
  100. fileInput.type = 'file';
  101. //设置文件name
  102. fileInput.name = 'ime-images';
  103. //允许上传多个文件
  104. fileInput.multiple = true;
  105. fileInput.onchange = this.onChangeUploadFile.bind(this);
  106. this.fileInput = fileInput;
  107. }
  108. //触发点击input点击事件,弹出选择文件对话框
  109. fileInput.click();
  110. }
  111. }