1

我是 Jquery 和 ajax 的新手。

我需要将多个图像上传到服务器文件夹并将详细信息存储在数据库表中。上传后,我需要在数据库中显示所有设置为“活动”的图像。(我查看了许多不适合我的代码)

之后,我需要将一些图像拖动到一个区域,并且还需要将拖动的图像信息存储在另一个表中。

有人有什么想法吗?请帮帮我?

谢谢

4

3 回答 3

1

现在 Dropzone.js 是最好的 js 插件,可以通过拖放上传多张图片。

官方网站。https://www.dropzonejs.com/

演示的完整示例在这里。

https://learncodeweb.com/web-development/drag-drop-images-with-bootstrap-4-and-reorder-using-php-jquery-and-ajax/

于 2019-10-30T00:50:37.080 回答
0

要上传多个图像,您可以使用此脚本。通过使用单个浏览按钮,您可以上传多张图片

$(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;
    }   
};
})();

对于拖放,您需要编写另一个功能,您可以参考这个网站这个

于 2012-05-28T06:04:55.203 回答
-1

http://www.plupload.com/example_queuewidget.php 在这里您可以找到一个不错的插件,可以帮助您上传多张图片。我已经使用过它并且对我来说效果很好。

于 2012-05-28T06:02:01.400 回答