TP5 Multi-image upload

The first is the final finish effect

Here is the source code https://pan.baidu.com/s/1eSAQoSy

Then is the detailed step (picture for the online reference, the code is actually write the effect of the Code; convenient reference):

1. Introduce JS on the HTML page where you want to add the image, and then write the code block to upload the image.

This step is the same as his original code, just do not have to write the hidden input box, because each picture needs a hidden input record ID value, so in the second step to write how to add input dynamically

HTML code:

<script type= "Text/javascript" src= "__static__/myquery.js" ></script>

<div class= "Controls" >
    <label class= "Item-label" > Category icons </label>
    <input type= "File" id= "Upload_picture" >
    <div class= "Upload-img-box" >
        <notempty name= "info[' icon ']" >
            <div class= "Upload-pre-item" ></div>
        </notempty>
    </div>
</div>

2. Modify the Uploadpicture function

This step is to dynamically add pictures to the page, and each add a picture will dynamically add a hidden input node to record the current image ID value, and for each picture plus a delete button, note that hidden input name needs to add [], so that the background to accept the data, And then the front desk modification is over.

JS Code:

<script type= "Text/javascript" >
Upload image
/* Initialize the upload plugin */
$ ("#upload_picture"). Uploadify ({
"Height": 30,
"SWF": "__static__/uploadify/uploadify.swf",
"Fileobjname": "Download",
"ButtonText": "Upload picture",
"Uploader": "{: U (' file/uploadpicture ', Array (' session_id ' =>session_id ())}",
"width": 120,
' Removetimeout ': 1,
' filetypeexts ': ' *.jpg; *.png; *.gif; ',
"Onuploadsuccess": Uploadpicture,
' Onfallback ': function () {
Alert (' not detected a compatible version of Flash. ');
}
});
function uploadpicture (file, data) {
var data = $.parsejson (data);
var src = ';
if (data.status) {
$_img_path = $ ("<input type= ' hidden ' name= ' icon[] ' class= ' icon ' value= '/> ');
$_img_path.val (Data.path);
$ (' #tab1 '). Append ($_img_path);
src = ' __root__ ' + data.path;
$_upload_img = $ ("$_img_del = $ ("<span class= ' btn-close ' title= ' delete picture ' ></span>>");
$_upload_item = $ ("<div class= ' Upload-pre-item ' ></div>");
$_upload_item.append ($_UPLOAD_IMG);
$_upload_item.append ($_img_del);
$ ('. Upload-img-box '). Append ($_upload_item);
} else {
Alert (DATA.MSG)
}
}
</script>

3. Modify Common.css

Add a style to the Delete button you added, and limit the size of the picture in the pop-up box

If the Delete button is not displayed, see if the background picture path is correct:

Background:url (.. /admin/images/blue_color/bg_icon.png);

Background:url (.. /images/blue_color/bg_icon.png)

The following can be downloaded---------------------------------------------------------------------

4. Modify Common.js (Public->admin->js->common.js)

The original upload image after clicking on the thumbnail full line can be displayed large image, modified only click on the thumbnail to view the larger image, so with $ (document). Delegate add an event for thumbnails that are not already present, and then in $ (". Upload-img-popup") Add this thumbnail directly to the copy node is OK, the original wording will cause the deletion of the picture button also added to the popup box.

5. Self-written myquery.js

The purpose of this step is to add an event to the Delete button, delete the selected picture and the image corresponding to the hidden input.? This completes the display of multiple images uploaded, and you can add pictures multiple times.

6. Backstage Use I (' Post.icon ') operation to get the icon data directly, return the data for all pictures of the ID

TP5 Multi-image upload