Is it possible to upload image to the server using Bootstrap's Modal dialog box, jQuery, AJAX and PHP? If yes how? If no what's the reason for it?

前端未结

关注

 1  536

无人及你 2021-02-03 15:50

I\'m using PHP, jQuery(jquery-1.9.1.min.js and jquery-ui-1.10.0.custom.min.js), AJAX, Bootstrap design framework(Bootstrap v3.0.0), etc.

I\'m relatively

1条回答

青春惊慌失措 (楼主)

2021-02-03 16:25

Yes, it's possible. Here's something to get you started.

Note: This uses the PHP class class.upload.php for uploading images. (http://www.verot.net/php_class_upload.htm)

All of this code has been tested and works. I just whipped it up, so it's pretty basic but should point you in the right direction. You'll need to sanitize inputs, do the correct messaging, etc.

Just create a file (index.html) and copy/paste the HTML and JavaScript into it. Then create a file post.php and put the PHP in it. Download the class.upload.php script and then create a directory named uploads. Give it the appropriate permissions (0755 or 0777). Keep everything in the same folder for this example. You should be good to go.

~~It's even possible to put the success and error messages right in the modal. I'm just using alert() here for brevity. If you want to put the messages in the modal, just create a~~

~~in the modal, give it an ID and then target that ID in the jQuery where I'm using alert(). It's pretty easy.~~

Edit: Added messaging to the example. :)

Here's the HTML and jQuery (index.html)


    
    
        Upload a Photo
        
        
        
    
    

        
            

            
                
                    
                        
                            
                                
                                Upload Photo

And your PHP script (post.php)

allowed = 'image/*';

    if($handle->uploaded) {
        $handle->Process('uploads');
        if($handle->processed) {
            echo 'Image uploaded';
        } else {
            echo 'error';
        }
    }

0 讨论(0)