Загрузка нескольких изображений, отображение всех, перетаскивание из всех

Question

Я новичок в JQuery и ajax.

Мне нужно загрузить несколько изображений в папку с сервером и сохранить данные в таблице db. После загрузки мне нужно отобразить все изображения, которые были установлены как «активные» в базе данных (я просмотрел много кодов, которые не работают для меня)

После этого мне нужно перетащить некоторые изображения в область, а также для хранения информации перетаскиваемых изображений в другой таблице.

У кого-нибудь есть идеи? Пожалуйста, помогите мне?

Благодаря

Answer 1

http://www.plupload.com/example_queuewidget.php Здесь вы можете найти хороший плагин, который поможет вам загрузить несколько images.I использовал это и работает хорошо для меня.

Answer 2

Для загрузки нескольких изображений вы можете использовать этот скрипт. С помощью одной кнопки просмотра Вы можете загрузить несколько изображений

$(function(){ 

    var btnUpload=$('#photo_0'); // id of browse button 
    new AjaxUpload(btnUpload, { 
     action: 'url_to_upload_function', 
     name: 'uploadfile', 
     onSubmit: function(file, ext){ 
      if (! (ext && /^(jpg|png|jpeg|gif|JPG|PNG|GIF|JPEG)$/.test(ext))){ 
       $("#photo_div1").html('Only JPG,PNG,GIF files are allowed'); // 
       return false; 
      } 
      var path="<?=base_url()?>images/wait.gif"; //losding image 
      $("#photo_div1").html("<img src="+path+" width='32' height='32' style='border:#b6b6b6 solid 1px;'>"); 
     }, 
     onComplete: function(file, response){ 
      response = jQuery.trim(response); 
      if(response=="error") 
      { 
       $("#photo_error").css("display","block"); 
       $("#upload_photo1").html(""); 

      } 
      else if(response!="error") 
      { 
       $("#photo_error").css("display","none"); 

       $("#photo_div1").html(""); 
      var path="uploads/"+response; //echo the image name from the upload function 
      var img="<table><tr><td ><img src="+path+" style='border:#b6b6b6 solid 1px;'></td></tr></table>"; 
      $("#img_div1").html(img);// display the image in a div it will display only one image. If you want to add more you can code according to that by using append or something like that 

      $("#upload_photo1").val(response); 
      $("#photo_hid1").val(response); 


      } else 
      { 
      alert("error"); 
      } 
     } 
    }); 
}); 

ВЫ ДОЛЖНЫ ВКЛЮЧИТЬ Этот файл также ajaxupload.js

/** 
* Ajax upload 
* Project page - http://valums.com/ajax-upload/ 
* Copyright (c) 2008 Andris Valums, http://valums.com 
* Licensed under the MIT license (http://valums.com/mit-license/) 
* Version 3.5 (23.06.2009) 
*/ 

/** 
* Changes from the previous version: 
* 1. Added better JSON handling that allows to use 'application/javascript' as a response 
* 2. Added demo for usage with jQuery UI dialog 
* 3. Fixed IE "mixed content" issue when used with secure connections 
* 
* For the full changelog please visit: 
* http://valums.com/ajax-upload-changelog/ 
*/ 

(function(){ 

var d = document, w = window; 

/** 
* Get element by id 
*/ 
function get(element){ 
    if (typeof element == "string") 
     element = d.getElementById(element); 
    return element; 
} 

/** 
* Attaches event to a dom element 
*/ 
function addEvent(el, type, fn){ 
    if (w.addEventListener){ 
     el.addEventListener(type, fn, false); 
    } else if (w.attachEvent){ 
     var f = function(){ 
      fn.call(el, w.event); 
     };   
     el.attachEvent('on' + type, f) 
    } 
} 


/** 
* Creates and returns element from html chunk 
*/ 
var toElement = function(){ 
    var div = d.createElement('div'); 
    return function(html){ 
     div.innerHTML = html; 
     var el = div.childNodes[0]; 
     div.removeChild(el); 
     return el; 
    } 
}(); 

function hasClass(ele,cls){ 
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); 
} 
function addClass(ele,cls) { 
    if (!hasClass(ele,cls)) ele.className += " "+cls; 
} 
function removeClass(ele,cls) { 
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); 
    ele.className=ele.className.replace(reg,' '); 
} 

// getOffset function copied from jQuery lib (http://jquery.com/) 
if (document.documentElement["getBoundingClientRect"]){ 
    // Get Offset using getBoundingClientRect 
    // http://ejohn.org/blog/getboundingclientrect-is-awesome/ 
    var getOffset = function(el){ 
     var box = el.getBoundingClientRect(), 
     doc = el.ownerDocument, 
     body = doc.body, 
     docElem = doc.documentElement, 

     // for ie 
     clientTop = docElem.clientTop || body.clientTop || 0, 
     clientLeft = docElem.clientLeft || body.clientLeft || 0, 

     // In Internet Explorer 7 getBoundingClientRect property is treated as physical, 
     // while others are logical. Make all logical, like in IE8. 


     zoom = 1; 
     if (body.getBoundingClientRect) { 
      var bound = body.getBoundingClientRect(); 
      zoom = (bound.right - bound.left)/body.clientWidth; 
     } 
     if (zoom > 1){ 
      clientTop = 0; 
      clientLeft = 0; 
     } 
     var top = box.top/zoom + (window.pageYOffset || docElem && docElem.scrollTop/zoom || body.scrollTop/zoom) - clientTop, 
     left = box.left/zoom + (window.pageXOffset|| docElem && docElem.scrollLeft/zoom || body.scrollLeft/zoom) - clientLeft; 

     return { 
      top: top, 
      left: left 
     }; 
    } 

} else { 
    // Get offset adding all offsets 
    var getOffset = function(el){ 
     if (w.jQuery){ 
      return jQuery(el).offset(); 
     }  

     var top = 0, left = 0; 
     do { 
      top += el.offsetTop || 0; 
      left += el.offsetLeft || 0; 
     } 
     while (el = el.offsetParent); 

     return { 
      left: left, 
      top: top 
     }; 
    } 
} 

function getBox(el){ 
    var left, right, top, bottom; 
    var offset = getOffset(el); 
    left = offset.left; 
    top = offset.top; 

    right = left + el.offsetWidth; 
    bottom = top + el.offsetHeight;  

    return { 
     left: left, 
     right: right, 
     top: top, 
     bottom: bottom 
    }; 
} 

/** 
* Crossbrowser mouse coordinates 
*/ 
function getMouseCoords(e){  
    // pageX/Y is not supported in IE 
    // http://www.quirksmode.org/dom/w3c_cssom.html   
    if (!e.pageX && e.clientX){ 
     // In Internet Explorer 7 some properties (mouse coordinates) are treated as physical, 
     // while others are logical (offset). 
     var zoom = 1; 
     var body = document.body; 

     if (body.getBoundingClientRect) { 
      var bound = body.getBoundingClientRect(); 
      zoom = (bound.right - bound.left)/body.clientWidth; 
     } 

     return { 
      x: e.clientX/zoom + d.body.scrollLeft + d.documentElement.scrollLeft, 
      y: e.clientY/zoom + d.body.scrollTop + d.documentElement.scrollTop 
     }; 
    } 

    return { 
     x: e.pageX, 
     y: e.pageY 
    };  

} 
/** 
* Function generates unique id 
*/  
var getUID = function(){ 
    var id = 0; 
    return function(){ 
     return 'ValumsAjaxUpload' + id++; 
    } 
}(); 

function fileFromPath(file){ 
    return file.replace(/.*(\/|\\)/, "");   
} 

function getExt(file){ 
    return (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : ''; 
}   

// Please use AjaxUpload , Ajax_upload will be removed in the next version 
Ajax_upload = AjaxUpload = function(button, options){ 
    if (button.jquery){ 
     // jquery object was passed 
     button = button[0]; 
    } else if (typeof button == "string" && /^#.*/.test(button)){     
     button = button.slice(1);    
    } 
    button = get(button); 

    this._input = null; 
    this._button = button; 
    this._disabled = false; 
    this._submitting = false; 
    // Variable changes to true if the button was clicked 
    // 3 seconds ago (requred to fix Safari on Mac error) 
    this._justClicked = false; 
    this._parentDialog = d.body; 

    if (window.jQuery && jQuery.ui && jQuery.ui.dialog){ 
     var parentDialog = jQuery(this._button).parents('.ui-dialog'); 
     if (parentDialog.length){ 
      this._parentDialog = parentDialog[0]; 
     } 
    }   

    this._settings = { 
     // Location of the server-side upload script 
     action: 'upload.php',   
     // File upload name 
     name: 'userfile', 
     // Additional data to send 
     data: {}, 
     // Submit file as soon as it's selected 
     autoSubmit: true, 
     // The type of data that you're expecting back from the server. 
     // Html and xml are detected automatically. 
     // Only useful when you are using json data as a response. 
     // Set to "json" in that case. 
     responseType: false, 
     // When user selects a file, useful with autoSubmit disabled    
     onChange: function(file, extension){},     
     // Callback to fire before file is uploaded 
     // You can return false to cancel upload 
     onSubmit: function(file, extension){}, 
     // Fired when file upload is completed 
     // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE! 
     onComplete: function(file, response) {} 
    }; 

    // Merge the users options with our defaults 
    for (var i in options) { 
     this._settings[i] = options[i]; 
    } 

    this._createInput(); 
    this._rerouteClicks(); 
} 

// assigning methods to our class 
AjaxUpload.prototype = { 
    setData : function(data){ 
     this._settings.data = data; 
    }, 
    disable : function(){ 
     this._disabled = true; 
    }, 
    enable : function(){ 
     this._disabled = false; 
    }, 
    // removes ajaxupload 
    destroy : function(){ 
     if(this._input){ 
      if(this._input.parentNode){ 
       this._input.parentNode.removeChild(this._input); 
      } 
      this._input = null; 
     } 
    },    
    /** 
    * Creates invisible file input above the button 
    */ 
    _createInput : function(){ 
     var self = this; 
     var input = d.createElement("input"); 
     input.setAttribute('type', 'file'); 
     input.setAttribute('name', this._settings.name); 
     var styles = { 
      'position' : 'absolute' 
      ,'margin': '-5px 0 0 -175px' 
      ,'padding': 0 
      ,'width': '220px' 
      ,'height': '30px' 
      ,'fontSize': '14px'        
      ,'opacity': 0 
      ,'cursor': 'pointer' 
      ,'display' : 'none' 
      ,'zIndex' : 2147483583 //Max zIndex supported by Opera 9.0-9.2x 
      // Strange, I expected 2147483647     
     }; 
     for (var i in styles){ 
      input.style[i] = styles[i]; 
     } 

     // Make sure that element opacity exists 
     // (IE uses filter instead) 
     if (! (input.style.opacity === "0")){ 
      input.style.filter = "alpha(opacity=0)"; 
     } 

     this._parentDialog.appendChild(input); 

     addEvent(input, 'change', function(){ 
      // get filename from input 
      var file = fileFromPath(this.value);  
      if(self._settings.onChange.call(self, file, getExt(file)) == false){ 
       return;    
      }              
      // Submit form when value is changed 
      if (self._settings.autoSubmit){ 
       self.submit();      
      }      
     }); 

     // Fixing problem with Safari 
     // The problem is that if you leave input before the file select dialog opens 
     // it does not upload the file. 
     // As dialog opens slowly (it is a sheet dialog which takes some time to open) 
     // there is some time while you can leave the button. 
     // So we should not change display to none immediately 
     addEvent(input, 'click', function(){ 
      self.justClicked = true; 
      setTimeout(function(){ 
       // we will wait 3 seconds for dialog to open 
       self.justClicked = false; 
      }, 3000);   
     });  

     this._input = input; 
    }, 
    _rerouteClicks : function(){ 
     var self = this; 

     // IE displays 'access denied' error when using this method 
     // other browsers just ignore click() 
     // addEvent(this._button, 'click', function(e){ 
     // self._input.click(); 
     // }); 

     var box, dialogOffset = {top:0, left:0}, over = false;       
     addEvent(self._button, 'mouseover', function(e){ 
      if (!self._input || over) return; 
      over = true; 
      box = getBox(self._button); 

      if (self._parentDialog != d.body){ 
       dialogOffset = getOffset(self._parentDialog); 
      } 
     }); 


     // we can't use mouseout on the button, 
     // because invisible input is over it 
     addEvent(document, 'mousemove', function(e){ 
      var input = self._input;    
      if (!input || !over) return; 

      if (self._disabled){ 
       removeClass(self._button, 'hover'); 
       input.style.display = 'none'; 
       return; 
      } 

      var c = getMouseCoords(e); 

      if ((c.x >= box.left) && (c.x <= box.right) && 
      (c.y >= box.top) && (c.y <= box.bottom)){   
       input.style.top = c.y - dialogOffset.top + 'px'; 
       input.style.left = c.x - dialogOffset.left + 'px'; 
       input.style.display = 'block'; 
       addClass(self._button, 'hover');     
      } else {   
       // mouse left the button 
       over = false; 
       if (!self.justClicked){ 
        input.style.display = 'none'; 
       } 
       removeClass(self._button, 'hover'); 
      }   
     });   

    }, 
    /** 
    * Creates iframe with unique name 
    */ 
    _createIframe : function(){ 
     // unique name 
     // We cannot use getTime, because it sometimes return 
     // same value in safari :(
     var id = getUID(); 

     // Remove ie6 "This page contains both secure and nonsecure items" prompt 
     // http://tinyurl.com/77w9wh 
     var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />'); 
     iframe.id = id; 
     iframe.style.display = 'none'; 
     d.body.appendChild(iframe);   
     return iframe;      
    }, 
    /** 
    * Upload file without refreshing the page 
    */ 
    submit : function(){ 
     var self = this, settings = this._settings; 

     if (this._input.value === ''){ 
      // there is no file 
      return; 
     } 

     // get filename from input 
     var file = fileFromPath(this._input.value);   

     // execute user event 
     if (! (settings.onSubmit.call(this, file, getExt(file)) == false)) { 
      // Create new iframe for this submission 
      var iframe = this._createIframe(); 

      // Do not submit if user function returns false          
      var form = this._createForm(iframe); 
      form.appendChild(this._input); 

      form.submit(); 

      d.body.removeChild(form);    
      form = null; 
      this._input = null; 

      // create new input 
      this._createInput(); 

      var toDeleteFlag = false; 

      addEvent(iframe, 'load', function(e){ 

       if (// For Safari 
        iframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" || 
        // For FF, IE 
        iframe.src == "javascript:'<html></html>';"){      

        // First time around, do not delete. 
        if(toDeleteFlag){ 
         // Fix busy state in FF3 
         setTimeout(function() { 
          d.body.removeChild(iframe); 
         }, 0); 
        } 
        return; 
       }    

       var doc = iframe.contentDocument ? iframe.contentDocument : frames[iframe.id].document; 

       // fixing Opera 9.26 
       if (doc.readyState && doc.readyState != 'complete'){ 
        // Opera fires load event multiple times 
        // Even when the DOM is not ready yet 
        // this fix should not affect other browsers 
        return; 
       } 

       // fixing Opera 9.64 
       if (doc.body && doc.body.innerHTML == "false"){ 
        // In Opera 9.64 event was fired second time 
        // when body.innerHTML changed from false 
        // to server response approx. after 1 sec 
        return;    
       } 

       var response; 

       if (doc.XMLDocument){ 
        // response is a xml document IE property 
        response = doc.XMLDocument; 
       } else if (doc.body){ 
        // response is html document or plain text 
        response = doc.body.innerHTML; 
        if (settings.responseType && settings.responseType.toLowerCase() == 'json'){ 
         // If the document was sent as 'application/javascript' or 
         // 'text/javascript', then the browser wraps the text in a <pre> 
         // tag and performs html encoding on the contents. In this case, 
         // we need to pull the original text content from the text node's 
         // nodeValue property to retrieve the unmangled content. 
         // Note that IE6 only understands text/html 
         if (doc.body.firstChild && doc.body.firstChild.nodeName.toUpperCase() == 'PRE'){ 
          response = doc.body.firstChild.firstChild.nodeValue; 
         } 
         if (response) { 
          response = window["eval"]("(" + response + ")"); 
         } else { 
          response = {}; 
         } 
        } 
       } else { 
        // response is a xml document 
        var response = doc; 
       } 

       settings.onComplete.call(self, file, response); 

       // Reload blank page, so that reloading main page 
       // does not re-submit the post. Also, remember to 
       // delete the frame 
       toDeleteFlag = true; 

       // Fix IE mixed content issue 
       iframe.src = "javascript:'<html></html>';";          
      }); 

     } else { 
      // clear input to allow user to select same file 
      // Doesn't work in IE6 
      // this._input.value = ''; 
      d.body.removeChild(this._input);     
      this._input = null; 

      // create new input 
      this._createInput();       
     } 
    },  
    /** 
    * Creates form, that will be submitted to iframe 
    */ 
    _createForm : function(iframe){ 
     var settings = this._settings; 

     // method, enctype must be specified here 
     // because changing this attr on the fly is not allowed in IE 6/7  
     var form = toElement('<form method="post" enctype="multipart/form-data"></form>'); 
     form.style.display = 'none'; 
     form.action = settings.action; 
     form.target = iframe.name; 
     d.body.appendChild(form); 

     // Create hidden input element for each data key 
     for (var prop in settings.data){ 
      var el = d.createElement("input"); 
      el.type = 'hidden'; 
      el.name = prop; 
      el.value = settings.data[prop]; 
      form.appendChild(el); 
     }   
     return form; 
    } 
}; 
})(); 

и для перетаскивания необходимо написать еще одну функцию, что вы можете обратиться this site или this