JQuery File upload upload plugin simple to use

Preface

The development process sometimes requires users to upload image information in the previous paragraph, we can usually use the form tag settings enctype= "Multipart/form-data" Property upload image, when we click the Submit button, the picture information will be automatically saved in the predefined variables $_ Files, we can be in the background through this predefined variable to get the foreground upload picture information, in addition to this method there are many plug-ins can be implemented to upload the image function. Jquery-file-upload is one of them and can be transferred across domains.

Jquery-file-upload Introduction

jquery file Upload is a jquery image upload component that supports multiple file uploads, cancellations, deletions, pre-upload thumbnail previews, list display image sizes, support for upload progress bar display, and server-side support for various dynamic language development.

Use steps

1. Introduction

<!--1. Based on jquery ui--><script src= "Assets/jqueryfileupload/jquery.ui.widget.js" ></script><!--2. Meet cross-domain--><!--<script src= "Assets/jqueryfileupload/jquery.iframe-transport.js" ></script>--> <!--3. Core file--><script src= "Assets/jqueryfileupload/jquery.fileupload.js" ></script>

　　

2. Preparing the HTML

<div class= "Form-group" style= "position:relative" >      <button class= "btn btn-default" > Upload picture </button >      <input id= "fileUpload" type= "file" name= "Pic1" >
<!--place a hidden input tag to store the picture path after the image has been successfully uploaded   so that it can be submitted with the form and will  be able to find the file based on the path--      <input type= "hidden" name = "Brandlogo" >
</div>
<!--this box is not related to plug-in functionality displays a preview of the uploaded image is not uploaded when the default graph is generally gray basemap--  
<div class= "Img_box" >

</div>

3.js Code

/* 3.2 Initializing upload image */     $ (' #fileUpload '). FileUpload ({        URL:'/category/addsecondcategorypic ',        DataType:' json ', done        :function  (e,data) {            $ ('. Img_box img '). attr (' Src ', data.result.picAddr);//dynamic modification of the preview map of the SRC            $ (' [name= ' Brandlogo "]). Val (data.result.picAddr) ;//image upload after successful background return to the picture path  before and after the table to be agreed to            $ (' #addCategoryForm '). Data (' Bootstrapvalidator '). UpdateStatus (' Brandlogo ', ' VALID ',null)        }    );

4. Parameter interpretation

1:url: Destination URL for request delivery

Type:string

Example: '/path/to/upload/handler.json '

2.Type: File upload http request mode, you can choose "POST", "PUT" or "PATCH",

Default "POST"

Type:string

Example: ' PUT '

3. DataType: The data type that you want to return from the server, the default "JSON"

Type:string

Example: ' JSON '

4. Autoupload: By default, files that are added to the component when the user taps the Start button are uploaded immediately. Set the Autoupload value to True to automatically upload.

Type:boolean

Default:true

5. Acceptfiletypes: Types of files that are allowed to be uploaded

Example:/(\.| \/) (GIF|JPE?G|PNG|XLSX) $/i

6. MaxFileSize: Maximum upload file size

example:999000 (999KB)//unit: B

7. Minfilesize: Minimum upload file size

example:100000 (100KB)//unit: B

8.previewMaxWidth: Maximum width of picture preview area

EXAMPLE:100//unit: PX

5. Callback function

1. Add: Triggered when the file is added to the upload component

2. Processalways: Triggers when a separate file processing queue finishes (complete or failed)

3. Progressall: Global upload callback function for handling events

4. Fail: The callback function triggered when the upload request fails, and the function will not be triggered if the server returns a JSON response with the error property.

5. Done: The callback function triggered when the upload request succeeds, and the function will be triggered if the server returns a JSON response with the error property.

6. Always: At the end of the upload request (success, error or abort) will be triggered.

JQuery File upload upload plugin simple to use