English 中文(简体)
多个图像上传, 显示所有 [关闭] 从全部 [关闭] 的拖放
原标题:multiple image uploads, display all,drag-drop from all [closed]
Closed. This question needs to be more focused. It is not currently accepting answers.

想要改进这个问题吗? 更新问题,使其只关注一个问题

Closed 3 years ago.

我是杰奎里和阿贾克斯的新人

我需要将多个图像上传到服务器文件夹, 并将细节存储在 db 表格中。 上传后, 我需要显示所有在数据库中设定为活动状态的图像 。 (我已经查看了许多不为我工作的代码)

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

有谁知道吗?

谢谢 谢谢

最佳回答
问题回答

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

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

你必须把这个文件也包括进去

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

拖放时,您需要写入另一个函数,这样您可以调用 这个网站 这个





相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

Clipboard access using Javascript - sans Flash?

Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...

javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.

热门标签