1/* 2 * myMassPhotoUploader - jQuery Plugin 3 * Simple and fancy upload photos 4 * 5 * Copyright (c) 2015 Aleksandr Povyshev 6 * 7 * Version: 1.0.0 (25/11/2015) 8 * Requires: jQuery v1.8.2+ 9 * 10 * Dual licensed under the MIT and GPL licenses: 11 * http://www.opensource.org/licenses/mit-license.php 12 * http://www.gnu.org/licenses/gpl.html 13 * 14 * EXAMPLE (JSON): 15 HTML: 16 <input type='hidden' name='PHOTOS' value=''> 17 18 JS: 19 $('input[name=PHOTOS]').myMassPhotoUploader({ 20 maxCountFile: 30, 21 drag: true, 22 btnRotate: true, 23 btnDelete: true, 24 pSizeW: 145, 25 pSizeH: 145, 26 }); 27 * 28 * 29 * 30 */ 31 32(function( $ ) { 33 $.fn.myMassPhotoUploader = function(options) { 34 var options = $.extend({ 35 maxCountFile: 10, 36 firstIsMain: "", 37 btnRotate: false, 38 btnDelete: false, 39 drag: true, 40 pSizeW: 75, 41 pSizeH: 75, 42 43 onUpload: null, 44 onDragEnd: null, 45 onDelete: null, 46 onRotate: null, 47 onChange: null, 48 }, options); 49 50 if( $(this).length == 0 ) return; 51 52 var elementNode = $(this), 53 tParent = elementNode.parent(), 54 mUploaderMainNode = $("<div class='myMassPhotoUploaderMain'></div>"), 55 mUploaderBlockNode = $("<ul class='myMassPhotoUploaderBlock'></ul>"), 56 mUploaderItemCount = 0; 57 58 elementNode.hide(); 59 tParent.html(elementNode); 60 tParent.prepend(mUploaderMainNode); 61 mUploaderMainNode.prepend(mUploaderBlockNode); 62 mUploaderItemCount = mUploaderBlockNode.find('li.myMassPhotoUploaderItem:not(.AddPhoto)').length; 63 mUploaderBlockNode.append("<li class='myMassPhotoUploaderItem AddPhoto'> <img src='/images/0.png'> </li>"); 64 65 if( elementNode.val().length > 0 ) { 66 var tmpArr = explode( '|', elementNode.val() ); 67 for(key in tmpArr) { 68 GetFile( tmpArr[key] ); 69 } 70 } 71 72 reupdateBtnAddPhoto(); 73 reupdateElementValue(); 74 InitializeDrag(); 75 76 77 function reupdateBtnAddPhoto() { 78 mUploaderItemCount = mUploaderBlockNode.find('li.myMassPhotoUploaderItem:not(.AddPhoto)').length; 79 if( mUploaderItemCount < options.maxCountFile ) { 80 mUploaderBlockNode.find('li.AddPhoto').show(); 81 if( options.firstIsMain != "" && $('div.MainPhoto', mUploaderMainNode).length == 0 && mUploaderItemCount > 0 ) { 82 mUploaderMainNode.prepend("<div class='MainPhoto'>"+options.firstIsMain+"</div>"); 83 } 84 } else { 85 mUploaderBlockNode.find('li.AddPhoto').hide(); 86 $('div.MainPhoto', mUploaderMainNode).remove(); 87 } 88 89 if( mUploaderItemCount > 0 ) { 90 $('div.MainPhoto', mUploaderMainNode).show(); 91 } else { 92 $('div.MainPhoto', mUploaderMainNode).hide(); 93 } 94 } 95 function reupdateElementValue() { 96 var tmp = []; 97 98 mUploaderBlockNode.find('li.myMassPhotoUploaderItem:not(.AddPhoto)').each(function(e) { 99 tmp.push( $(this).attr('name') ); 100 }); 101 102 elementNode.val( implode("|", tmp) ); 103 } 104 function InitializeDrag() { 105 mUploaderBlockNode.on('dragover', function (e) { 106 e.preventDefault(); 107 e.stopPropagation(); 108 if( mUploaderBlockNode.find('li.myMassPhotoUploaderItem:not(.AddPhoto)').length < options.maxCountFile ) $(this).addClass('H'); 109 }); 110 mUploaderBlockNode.on('dragleave', function (e) { 111 e.preventDefault(); 112 e.stopPropagation(); 113 $(this).removeClass('H'); 114 }); 115 mUploaderBlockNode.on('drop', function (e) { 116 e.preventDefault(); 117 e.stopPropagation(); 118 $(this).removeClass('H'); 119 120 var files = e.originalEvent.dataTransfer.files; 121 if( files[0] != undefined ) { 122 FetchFiles(files); 123 } 124 }); 125 } 126 function FetchFiles(files) { 127 for(var i = 0; i < files.length; i++) { 128 if(files[i].type.indexOf('image/') < 0) continue; 129 130 reupdateBtnAddPhoto(); 131 if( mUploaderItemCount < options.maxCountFile ) { 132 if( files[i].size > 10*1024*1024 ) { 133 alert("ÐÑибка, Ñайл «"+files[i].name+"» пÑевÑÑÐ°ÐµÑ Ð´Ð¾Ð¿ÑÑÑимÑй ÑÐ°Ð·Ð¼ÐµÑ Ð·Ð°Ð³ÑÑзки 10 мегабайÑ"); 134 } else { 135 var ImgElement = $("<li class='myMassPhotoUploaderItem' name='0=0'> <img src='/images/ajax-loader.gif'> </li>"); 136 137 if( options.btnRotate ) {
138 ImgElement.prepend( "<div class='Rotate'></div>" ); 139 } 140 if( options.btnDelete ) { 141 ImgElement.prepend( "<div class='Delete'></div>" ); 142 } 143 144 ImgElement.insertBefore( mUploaderBlockNode.find('li.AddPhoto') ); 145 reupdateBtnAddPhoto(); 146 147 UploadFile( files[i], ImgElement); 148 } 149 } 150 } 151 } 152 function UploadFile( files, ImgElement ) { 153 var fd = new FormData(); 154 fd.append('MyImg', files); 155 156 $.ajax({ 157 url: '/imgupload/'+options.pSizeW+'/'+options.pSizeH+'/', 158 dataType: 'json', 159 cache: false, 160 contentType: false, 161 processData: false, 162 data: fd, 163 type: 'POST', 164 success: function(data, status) { 165 if (data != undefined && data.id > 0) { 166 ImgElement.attr('name', data.id+"=0").find('img').attr( 'src', data.preview.src ); 167 reupdateElementValue(); 168 if( options.onUpload != null ) { 169 options.onUpload(ImgElement); 170 } 171 if( options.onChange != null ) { 172 options.onChange(ImgElement); 173 } 174 } else { 175 alert(data.error); 176 } 177 }, 178 complete: function(data, status) { 179 if( data.responseText == '' ) { 180 ImgElement.remove(); 181 reupdateBtnAddPhoto(); 182 } 183 } 184 }); 185 } 186 function GetFile( img_param ) { 187 var params = explode('=', img_param); 188 if( parseInt(params[0]) <= 0 ) return; 189 190 191 var ImgElement = $("<li class='myMassPhotoUploaderItem' name='0=0'> <img src='/images/ajax-loader.gif'> </li>"); 192 if( options.btnRotate ) ImgElement.prepend( "<div class='Rotate'></div>" ); 193 if( options.btnDelete ) ImgElement.prepend( "<div class='Delete'></div>" ); 194 ImgElement.insertBefore( mUploaderBlockNode.find('li.AddPhoto') ); 195 196 reupdateBtnAddPhoto(); 197 198 $.ajax({ 199 url: '/imgget/'+params[0]+'/'+options.pSizeW+'/'+options.pSizeH+'/', 200 dataType: 'json', 201 cache: true, 202 contentType: false, 203 processData: false, 204 type: 'GET', 205 success: function(data, status) { 206 ImgElement.attr('name', data.id+'='+params[1]).find('img').attr('src', data.preview.src) 207 ImgElement.find('img').css('transform', 'rotate('+params[1]+'deg)'); 208 reupdateElementValue(); 209 } 210 }); 211 } 212 213 if( options.drag ) { 214 $( mUploaderBlockNode ).dragsort({ 215 itemSelector: "li:not(.AddPhoto)", 216 dragBetween: false, 217 dragEnd: function() { 218 reupdateElementValue(); 219 }, 220 placeHolderTemplate: "<li class='myMassPhotoUploaderItem'></li>", 221 }); 222 $( mUploaderBlockNode ).addClass('drag'); 223 } 224 225 $(mUploaderBlockNode).on('click', 'li.AddPhoto', function() { 226 var FileUploadNode = $("<input type='file' accept='image/*' style='left: -9999px; position: absolute; top: 0; visibility: hidden;' name='FileUpload' multiple>"); 227 mUploaderMainNode.append(FileUploadNode); 228 FileUploadNode.trigger('click').change(function() { 229 FetchFiles($(this)[0].files); 230 $(this).remove(); 231 }); 232 }); 233 234 if( options.btnRotate ) { 235 $(mUploaderBlockNode).on('click', 'li.myMassPhotoUploaderItem div.Rotate', function(e) { 236 e.preventDefault(); 237 var t = $(this); 238 var parentNode = t.parents('li.myMassPhotoUploaderItem:eq(0)'); 239 var paramImg = explode("=", parentNode.attr('name')); 240 241 if( paramImg[1] == undefined ) paramImg[1] = 0; 242 paramImg[0] = parseInt(paramImg[0]); 243 paramImg[1] = parseInt(paramImg[1]); 244 245 paramImg[1] = paramImg[1] + 90; 246 if( paramImg[1] >= 360 ) { 247 paramImg[1] = paramImg[1] - Math.ceil(paramImg[1] / 360) * 360; 248 } 249 250 parentNode.find('img').css('transform', 'rotate('+paramImg[1]+'deg)'); 251 252 parentNode.attr('name', paramImg[0]+"="+paramImg[1]); 253 reupdateElementValue(); 254 255 if( options.onRotate != null ) { 256 options.onRotate(parentNode); 257 } 258 if( options.onChange != null ) { 259 options.onChange(parentNode); 260 } 261 }); 262 } 263 if( options.btnDelete ) { 264 $(mUploaderBlockNode).on('click', 'li.myMassPhotoUploaderItem div.Delete', function(e) { 265 e.preventDefault(); 266 var t = $(this); 267 var parentNode = t.parents('li.myMassPhotoUploaderItem:eq(0)'); 268 var paramImg = explode("=", parentNode.attr('name')); 269 var src = parentNode.find('img').attr('src'); 270 271 // if(confirm('ÐÑ Ð´ÐµÐ¹ÑÑвиÑелÑно Ñ Ð¾ÑиÑе ÑдалиÑÑ ÑÑÑ ÑоÑогÑаÑиÑ?')) { 272 if( paramImg[1] == undefined ) paramImg[1] = 0; 273 paramImg[0] = parseInt(paramImg[0]); 274 paramImg[1] = parseInt(paramImg[1]); 275 276 parentNode.remove(); 277 reupdateBtnAddPhoto(); 278 reupdateElementValue(); 279 280 if( options.onDelete != null ) { 281 options.onDelete(parentNode); 282 } 283 if( options.onChange != null ) { 284 options.onChange(parentNode); 285 } 286 // } 287 }); 288 } 289 } 290})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.