ajax异步上传带进度条视频并提取缩略图的示例分析

本篇文章给大家分享的是有关ajax异步上传带进度条视频并提取缩略图的示例分析，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

在双清等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站设计、成都做网站网站设计制作定制制作,公司网站建设,企业网站建设,成都品牌网站建设,营销型网站,成都外贸网站建设公司,双清网站建设费用合理。

最近在做一个集富媒体功能于一身的项目。需要上传视频。这里我希望做成异步上传，并且有进度条，响应有状态码，视频连接，缩略图。

服务端响应

 {
   "thumbnail": "/slsxpt//upload/thumbnail/fdceefc.jpg",
   "success": true,
   "link": "/slsxpt//upload/video/fdceefc.mp"
 }

并且希望我的input file控件不要被form标签包裹。原因是form中不能嵌套form，另外form标签在浏览器了还是有一点点默认样式的，搞不好又要写css。

以前用ajaxFileUpload做过文件异步上传。不过这个东西好久未更新，代码还有bug，虽然最后勉强成功用上了，但总觉不好。而且ajaxFileUpload没有直接添加xhr2的progress事件响应，比较麻烦。

上网找了一下，发现方法都是很多。

比如在文件上传后，将上传进度放到session中，轮询服务器session。但我总觉的这个方法有问题，我认为这种方法看到的进度，应该是我的服务端应用程序代码（我的也就是action）从服务器的临时目录复制文件的进度，因为所有请求都应该先提交给服务器软件，也就是tomcat，tomcat对请求进行封装session，request等对象，并且文件实际上也应该是它来接收的。也就是说在我的action代码执行之前，文件实际上已经上传完毕了。

后来找到个比较好的方法使用 jquery.form.js插件的ajaxSubmit方法。这个方法以表单来提交，也就是 $.fn.ajaxSubmit.：$(form selector).ajaxSubmit({})，这个api的好处是它已经对xhr2的progress时间进行了处理，可以在调用时传递一个uploadProgress的function，在function里就能够拿到进度。而且如果不想input file被form包裹也没关系，在代码里createElement应该可以。不过这个方法我因为犯了个小错误最后没有成功，可惜了。

ajaxSubmit源码

最后，还是使用了$.ajax 方法来做。$.ajax 不需要关联form，有点像个静态方法哦。唯一的遗憾就是$.ajax options里没有对progress的响应。不过它有一个参数为 xhr ,也就是你可以定制xhr，那么久可以通过xhr添加progress的事件处理程序。再结合看一看ajaxSubmit方法里对progress事件的处理，顿时豁然开朗

ajax异步上传带进度条视频并提取缩略图的示例分析

那么我也可以在$.ajax 方法中添加progress事件处理函数了。为了把对dom的操作从上传业务中抽取出来，我决定以插件的形式写。下面是插件的代码

 ;(function ($) {
   var defaults = {
       uploadProgress    :  null,
       beforeSend      :  null,
       success        :  null,
     },
     setting = {
     };
   var upload = function($this){
     $this.parent().on('change',$this,function(event){
       //var $this = $(event.target),
       var  formData = new FormData(),
         target = event.target || event.srcElement;
       //$.each(target.files, function(key, value)
       //{
       //  console.log(key);
       //  formData.append(key, value);
       //});
       formData.append('file',target.files[]);
       settings.fileType && formData.append('fileType',settings.fileType);
       $.ajax({
         url        :  $this.data('url'),
         type      :  "POST",
         data      :  formData,
         dataType    :  'json',
         processData    :  false,
         contentType    :  false,
         cache      :  false,
         beforeSend    :  function(){
           //console.log('start');
           if(settings.beforeSend){
             settings.beforeSend();
           }
         },
         xhr        :   function() {
           var xhr = $.ajaxSettings.xhr();
           if(xhr.upload){
             xhr.upload.addEventListener('progress',function(event){
               var total = event.total,
                 position = event.loaded || event.position,
                 percent = ;
               if(event.lengthComputable){
                 percent = Math.ceil(position / total * );
               }
               if(settings.uploadProgress){
                 settings.uploadProgress(event, position, total, percent);
               }
             }, false);
           }
           return xhr;
         },
         success      :  function(data,status,jXhr){
           if(settings.success){
             settings.success(data);
           }
         },
         error      :  function(jXhr,status,error){
           if(settings.error){
             settings.error(jXhr,status,error);
           }
         }
       });
     });
   };
   $.fn.uploadFile = function (options) {
     settings = $.extend({}, defaults, options);
     // 文件上传
     return this.each(function(){
       upload($(this));
     });
   }
 })($ || jQuery);

下面就可以在我的jsp页面里面使用这个api了。

package org.lyh.app.actions; import org.apache.commons.io.FileUtils; import org.apache.struts.ServletActionContext; import org.lyh.app.base.BaseAction; import org.lyh.library.SiteHelpers; import org.lyh.library.VideoUtils; import java.io.File; import java.io.IOException; import java.security.KeyStore; import java.util.HashMap; import java.util.Map; /** * Created by admin on //. */ public class UploadAction extends BaseAction{ private String saveBasePath; private String imagePath; private String videoPath; private String audioPath; private String thumbnailPath; private File file; private String fileFileName; private String fileContentType; // 省略setter getter方法 public String video() { Map dataJson = new HashMap(); System.out.println(file); System.out.println(fileFileName); System.out.println(fileContentType); String fileExtend = fileFileName.substring(fileFileName.lastIndexOf(".")); String newFileName = SiteHelpers.md(fileFileName + file.getTotalSpace()); String typeDir = "normal"; String thumbnailName = null,thumbnailFile = null; boolean needThumb = false,extractOk = false; if (fileContentType.contains("video")) { typeDir = videoPath; // 提取缩量图 needThumb = true; thumbnailName = newFileName + ".jpg"; thumbnailFile = app.getRealPath(saveBasePath + thumbnailPath) + "/" + thumbnailName; } String realPath = app.getRealPath(saveBasePath + typeDir); File saveFile = new File(realPath, newFileName + fileExtend); // 存在同名文件，跳过 if (!saveFile.exists()) { if (!saveFile.getParentFile().exists()) { saveFile.getParentFile().mkdirs(); } try { FileUtils.copyFile(file, saveFile); if(needThumb){ extractOk = VideoUtils.extractThumbnail(saveFile, thumbnailFile); System.out.println("提取缩略图成功:"+extractOk); } dataJson.put("success", true); } catch (IOException e) { System.out.println(e.getMessage()); dataJson.put("success", false); } }else{ dataJson.put("success", true); } if((Boolean)dataJson.get("success")){ dataJson.put("link", app.getContextPath() + "/" + saveBasePath + typeDir + "/" + newFileName + fileExtend); if(needThumb){ dataJson.put("thumbnail", app.getContextPath() + "/" + saveBasePath + thumbnailPath + "/" + thumbnailName); } } this.responceJson(dataJson); return NONE; } }

package org.lyh.library; import java.io.File; import java.io.IOException; import java.io.InputStream; import java.util.ArrayList; import java.util.List; /** * Created by admin on //. */ public class VideoUtils { public static final String FFMPEG_EXECUTOR = "C:/Software/ffmpeg.exe"; public static final int THUMBNAIL_WIDTH = ; public static final int THUMBNAIL_HEIGHT = ; public static boolean extractThumbnail(File inputFile,String thumbnailOutput){ List command = new ArrayList(); File ffmpegExe = new File(FFMPEG_EXECUTOR); if(!ffmpegExe.exists()){ System.out.println("转码工具不存在"); return false; } System.out.println(ffmpegExe.getAbsolutePath()); System.out.println(inputFile.getAbsolutePath()); command.add(ffmpegExe.getAbsolutePath()); command.add("-i"); command.add(inputFile.getAbsolutePath()); command.add("-y"); command.add("-f"); command.add("image"); command.add("-ss"); command.add(""); command.add("-t"); command.add("."); command.add("-s"); command.add(THUMBNAIL_WIDTH+"*"+THUMBNAIL_HEIGHT); command.add(thumbnailOutput); ProcessBuilder builder = new ProcessBuilder(); builder.command(command); builder.redirectErrorStream(true); try { long startTime = System.currentTimeMillis(); Process process = builder.start(); System.out.println("启动耗时"+(System.currentTimeMillis()-startTime)); return true; } catch (IOException e) { e.printStackTrace(); return false; } } }

大橙子网站建设，新征程启航

ajax异步上传带进度条视频并提取缩略图的示例分析

其他资讯