BootStrap fileinput.js File Upload Component Example Code

1Firstly, we download and include the fileinput plugin

<span style="font-size:14"px;"><link type="text/css" rel="stylesheet" href="fileinput"/css/fileinput.css" rel="external nofollow" /> 
<script type="text/javascript" src="fileinput/js/fileinput.js"></script> 
<script type="text/javascript" src="fileinput/js/fileinput_locale_zh.js"></script></span> 

2.HTML settings:

<span style="font-size:14px;"><form enctype="multipart/form-data"> 
  <input id="file-file" class="file" type="file" multiple> 
</form></span> 

3.Initialization settings:

function initFileInput(ctrlName, uploadUrl) { 
      var control = $('#' + ctrlName); 
      control.fileinput({ 
        resizeImage : true, 
        maxImageWidth : 200, 
        maxImageHeight : 200, 
        resizePreference : 'width', 
        language : 'zh', //Set language 
        uploadUrl : uploadUrl, 
        uploadAsync : true, 
        allowedFileExtensions : [ 'jpg', 'png', 'gif' ],//Received file extensions 
        showUpload : true, //Whether to display the upload button 
        showCaption : true,//Whether to display the title 
        browseClass : "btn btn-primary", //Button style 
        previewFileIcon : "<i class='glyphicon glyphicon-king'></i> 
        maxFileCount : 3, 
        msgFilesTooMany : "The selected images exceed the maximum number", 
        maxFileSize : 2000, 
      }); 
    }; 
   //Initialize the control initFileInput(id,uploadurl) control id, and upload path 
    initFileInput("file-file", "/tqyh/pushMessAction()); 

Note: To use the built-in upload button of the control and the upload progress, the form must be wrapped with a form
(Of course, enctype: 'multipart' can also be added during initialization)/form-data', it's the same) but no need to define action

<strong><form enctype="multipart/form-data"> 
  <input id="file-file" class="file" type="file" multiple> 
</form></strong> 

Finally, upload it normally through the background.

Some friends said I didn't write it clearly, okay, I'll post the background code:

servlet：

@Override 
public void doPost(HttpServletRequest request,  
       HttpServletResponse response) 
       throws ServletException, java.io.IOException { 
    String path = request.getSession().getServletContext().getRealPath("/headUpload"); 
  UploadMediaService upload=new UploadMediaService(); 
  String headimage=upload.getMeiaName(path, request); 
  request.getSession().setAttribute("headname",headimage ); 
  System.out.println("File upload successful"); 
 } 
 @Override 
public void doGet(HttpServletRequest request,  
           HttpServletResponse response) 
    throws ServletException, java.io.IOException { 
  doPost( request, response); 
 } 

In fact, the background does not need to receive it. We can obtain one or more uploaded files by parsing the request. The above code mainly includes the core code:

<span style="font-size:14px;">String path = request.getSession().getServletContext().getRealPath("/headUpload"); 
      UploadMediaService upload=new UploadMediaService(); 
      String headimage=upload.getMeiaName(path, request);</span> 

<span style="font-size:14px;">UploadMediaService ： 
/** 
   * Upload media files and store them on the server 
   * 
   * @param path The path to which the file needs to be uploaded  
   * @param request The client's request 
   * @return 
   */ 
  public static String uploadLocalMedia(String path,HttpServletRequest request){ 
    String filename ="";  
     //Get the disk file item factory  
    DiskFileItemFactory factory = new DiskFileItemFactory();  
    //If the following two lines are not set, uploading large files will occupy a lot of memory  
    //Set the temporary storage room, this room can be different from the final storage directory of the files  
    /** 
     * The principle is that it is first stored in the temporary storage room and then written to the corresponding directory on the hard disk  
     * In theory, when uploading a file, it is actually uploading two copies, the first one is in the .tem format  
     * Then write it to the corresponding directory on the hard disk 
     */  
    factory.setRepository(new File(path));  
    //Set the cache size, when the capacity of the uploaded file exceeds the cache, it is directly placed in the temporary storage room  
    factory.setSizeThreshold(1024*1024) ;  
    //High-level API for file upload processing  
    ServletFileUpload upload = new ServletFileUpload(factory);  
    try {  
      //Multiple files can be uploaded  
      List<FileItem> list = upload.parseRequest(request);  
      for(FileItem item : list) {  
        //If the obtained form information is ordinary text information  
        if(item.isFormField()) {            
          //Get the specific string input by the user, the name is quite good because the form submitted is a string type  
          String value = item.getString() ;  
        }  
          //Process the non-simple string passed in, such as binary images, videos, etc.  
          /** 
           * The following three steps mainly obtain the name of the uploaded file 
           */  
          //Get the path name  
          String value = item.getName() ;  
          //Find the index of the last backslash  
          int start = value.lastIndexOf("\\");  
          //截取 上传文件的 字符串名字，加1is removed,  
          filename = value.substring(start+1);  
          System.out.println("filename="+ filename); 
          //The data is truly written to the disk  
          //The exception it throws is caught by exception  
          //item.write( new File(path,filename) );//Provided by third parties  
          //Manually written  
          OutputStream out = new FileOutputStream(new File(path,filename));  
          InputStream in = item.getInputStream() ;  
          int length = 0 ;  
          byte [] buf = new byte[1024];  
          // The data read by in.read(buf) each time is stored in the  buf array  
          while( (length = in.read(buf) ) != -1) {  
            //Write data taken from the  buf array to disk (output stream)  
            out.write(buf, 0, length);   
          }  
          in.close();  
          out.close();  
        }  
      }  
    } catch (FileUploadException e) {  
      log.error("File upload exception:", e); 
    } catch (Exception e) {  
      log.error("File processing IO exception:", e); 
    }  
    return filename ; 
  } 
</span>

The above is the example code of BootStrap fileinput.js file upload component introduced by the editor to everyone, hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. Thank you very much for your support of the Yelling tutorial website!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w.3If you find any infringing content, please report it by email to codebox.com (replace # with @ when sending an email), and provide relevant evidence. Once verified, this site will immediately delete the suspected infringing content.