Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what is the method of uploading multiple pictures by php". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Php to achieve multi-image upload methods: 1, create html code and load swfupload components and flash;2, upload in php and return the address of the uploaded picture; 3, call php;4 through ajax to save the address of the picture to the database.

Operating environment of this article: Windows7 system, thinkphp v5.1, DELL G3 computer

How does php achieve multi-image upload?

The method of uploading multiple images with php:

First on a picture to show you the effect, if necessary, download to learn. It doesn't have to be in ThinkPHP, it's just that I'm going to learn to use ThinkPHP for development.

[preparation work] what you need now is to download a lot of swfupload.js online, Baidu yourself. Explain the idea or process first, and then code it.

The whole process of uploading multiple images

1. Write the html code, including the html code for the effect displayed after upload, and load the swfupload component and flash

two。 After adding the image, upload it to php to process the upload and return the address of the uploaded image and load it into the preview area.

3. After clicking the X in the upper right corner of each image, ajax calls the php method to delete the image in the preview area.

4. When you add a picture and delete a picture in the preview area, you change the value of a hidden field so that the address of the image can be saved to the database after the entire upload submission form is completed. (see need)

[code part] write html code first. (the css file will not be posted)

Flash does not refresh multiple images upload var path='__STYLE__';var url='__URL__';var swfu;_window.onload = function () {swfu = new SWFUpload ({upload_url: "_ _ URL__/uploadImg", post_params: {"PHPSESSID": ""}, file_size_limit: "2 MB", file_types: "* .jpg;*.png;*.gif" * .bmp ", file_types_description:" JPG Images ", file_upload_limit:" 100,100 ", file_queue_error_handler: fileQueueError,file_dialog_complete_handler: fileDialogComplete,upload_progress_handler: uploadProgress,upload_error_handler: uploadError,upload_success_handler: uploadSuccess,upload_complete_handler: uploadComplete,button_image_url:" _ _ STYLE__/images/upload.png ", button_placeholder_id:" spanButtonPlaceholder ", button_width: 113 Button_text_style: '.spanButtonPlaceholder {font-family: Helvetica, Arial, sans-serif Font-size: 14pt;}', button_text_top_padding: 0Padding: 0grammatical STYLE__/swf/swfupload.swf mode: SWFUpload.WINDOW_MODE.TRANSPARENT,button_cursor: SWFUpload.CURSOR.HAND,flash_url: "_ _ STYLE__/swf/swfupload.swf", custom_settings: {upload_target: "divFileProgressContainer"}, debug: false});}

Tell me more about the configuration items of swfupload

Upload_url is the php address for uploading pictures.

File_size_limit upload size limit

File_upload_limit limits the maximum number of images users can upload at a time. 0 means no limit.

File_queue_error_handler

File_dialog_complete_handler add the method to be executed after the file upload selection box is closed

Method to execute when upload error of upload_error_handler file

The method to execute after the upload_success_handler file is uploaded successfully

The method to execute after the upload of upload_complete_handler file is completed

Debug: if false wants to study swfupload, you can set this to true, debug mode

Next is the php code for uploading pictures. The upload class of TP used here is simple and easy to understand.

Function uploadImg () {import ('ORG.Net.UploadFile'); $upload = new UploadFile (); / / instantiate upload class $upload- > maxSize = 3145728; / / set attachment upload size $upload- > allowExts = array (' jpg', 'gif',' png', 'jpeg'); / / set attachment upload type $savepath='./uploads/'.date (' Ymd'). /'; if (! file_exists ($savepath)) {mkdir ($savepath);} $upload- > savePath = $savepath / / set attachment upload directory if (! $upload- > upload ()) {/ / upload error message $this- > error ($upload- > getErrorMsg ());} else {/ / get upload file information successfully $info = $upload- > getUploadFileInfo ();} print_r (J (_ ROOT__.'/'.$info [0] ['savepath'].' /. $info [0] ['savename']));}

After the upload is successful, echo or print_r outputs the address because it uses the ajax method.

Preview the code for the locale

Function uploadSuccess (file, serverData) {addImage (serverData); var $svalue=$ ('form > input [name=s]'). Val (); if ($svalue=='') {$('form > input [name=s]') .val (serverData);} else {$('form > input [name=s]'). Val ($svalue+ "|" + serverData);} function addImage (src) {var newElement = "

"; $(" # pic_list ") .append (newElement); $(" img.button ") .last () .bind (" click ", del);}

ServerData is the address of the image returned in php. After the return, call the addImage method directly to load the address into a ul. Update the values in the hidden field at the same time

Delete picture settings

Var del = function () {/ / var fid = $(this). Parent (). PrevAll (). Length + 1 img' src=$ (this) .siblings ('img'). Attr (' src'); var $svalue=$ ('form > input [name=s]'). Val () $.ajax ({type: "GET", / / visit WebService request url: window.url+ "/ del", / / call the address and method name combination of WebService-WsURL/ method name data: "src=" + src,success: function (data) {var $val=$svalue.replace (data,''); $('form > input [name=s]'). Val ($val);}); $(this). Parent (). Remove ();}

Ajax mode, submit to php mode, if successful, update the val in the hidden domain and destroy the elements.

Function del () {$src=str_replace (_ ROOT__.'/','', str_replace ('/ /','/', $_ GET ['src'])); if (file_exists ($src)) {unlink ($src);} print_r ($GET [' src']); exit ();}

The method of deletion is very simple: delete the file of the address submitted by ajax and return the deleted address. Ajax will process and automatically update the val of the hidden domain.

This is the end of the content of "what is the method for php to upload multiple images". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.