百度webuploader上传1

mac2022-06-30 94

百度webupload网址：http://fex.baidu.com/webuploader/

引入js和css

页面html代码

初始化webupload.js

uploader = WebUploader.create({

// 不压缩image resize: false,

// swf文件路径 swf: '/content/Uploader.swf',

// 文件接收服务端。 server: '/Webupload/Process', （这是在后台写的接收前台传送的文件方法）

// 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash.

pick: '#picker', chunked :true, chunkSize: 5242880,（分布上传一次5mb）

threads :1(这个是关键如果不限制同时上传的数目会导致后台接受的分片错乱比如按正常的分片第一片应该是开头但接收的可能就变成第三片从而顺序错乱这是由于百度webuploader默认允许同时最大上传进程数为3个所以会导致接受顺序错乱从而重组发生错误)

});

// 当有文件添加进来的时候 uploader.on('fileQueued', function (file) { $list.append('<div id="' + file.id + '" class="item">' + '<div class="info">' + file.name + '</div>' + '<div class="state">等待上传...</div>' + '<div class="download" style="display:none;"></div>' + '<div class="del"></div>' + '</div>'); }); uploader.on('uploadProgress', function (file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress .bar');

// 避免重复创建 if (!$percent.length) { $percent = $('<span class="progress">' + '<span class="percentage"><span class="text"></span>' + '<span class="bar" role="progressbar" style="width: 0%">' + '</span></span>' + '</span>').appendTo($li).find('.bar'); }

$li.find('div.state').text('上传中');$li.find("span.text").text(Math.round(percentage * 100) + '%');//显示上传进度 $percent.css('width', percentage * 100 + '%'); });

uploader.on('uploadSuccess', function (file) { $('#' + file.id).find('div.state').text('已上传'); });

uploader.on('uploadError', function (file) { $('#' + file.id).find('div.state').text('上传出错'); });

uploader.on('uploadComplete', function (file) { $('#' + file.id).find('.progress').fadeOut(); });

uploader.on('all', function (type) { if (type === 'startUpload') { state = 'uploading'; } else if (type === 'stopUpload') { state = 'paused'; } else if (type === 'uploadFinished') { state = 'done'; }

if (state === 'uploading') { $btn.text('暂停上传'); } else { $btn.text('开始上传'); } });

$btn.on('click', function () { if (state === 'uploading') { uploader.stop(true);//不加ture暂停上传没用！ } else { uploader.upload(); } }); });

</script>

后台接收上传的文件的代码（接收接口）内有上传分布接受

public class WebuploadController : Controller { // // GET: /Webupload/

public WebuploadController() { var applicationPath = VirtualPathUtility.ToAbsolute("~") == "/" ? "" : VirtualPathUtility.ToAbsolute("~"); urlPath = "/PHP"; }

static string urlPath = string.Empty; static string guid = Guid.NewGuid().ToString("N"); static int num = 1; public ActionResult Process(string id, string name, string type, string lastModifiedDate, int size, HttpPostedFileBase file) { string filePathName = string.Empty; string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, "PHP"); if (Request.Files.Count == 0) { return Json(new { jsonrpc = 2.0, error = new { code = 102, message = "保存失败" }, id = "id" }); }

string ex = Path.GetExtension(file.FileName); filePathName = guid+"_"+num + ex;//分布接受（建立每个接受分段的名字） num++;

if (!System.IO.Directory.Exists(localPath)) { System.IO.Directory.CreateDirectory(localPath); } file.SaveAs(Path.Combine(localPath, filePathName));//写入文件夹中

int total = size / 5242880;//判断有多少个分块 if(sizeR42880>0) { total += 1; }

//重组

if (num > total) { chongzu(total, ex, guid, localPath); }

return Json(new { jsonrpc = "2.0", id = "id", filePath = urlPath + "/" + filePathName }); }

//重组（分片数目，接受视频类型，存储视频的名字，存放的地址）

public void chongzu(int total, string ex, string guid, string localPath) { try { string fileurl = Path.Combine(localPath, guid + ex);

var fs = new FileStream(fileurl, FileMode.Create);

for (int i = 1; i <= total; ++i) {

string part = Path.Combine(localPath, guid + "_" + i + ex);

var bytes = System.IO.File.ReadAllBytes(part);

fs.Write(bytes, 0, bytes.Length);

bytes = null;

System.IO.File.Delete(part);

} fs.Close();

filenameone = guid + ex;

} catch (Exception e) { Response.Write("<script>alert('视频重组失败') </script>"); } finally { num = 1; guid = Guid.NewGuid().ToString("N"); //为了下个视频重置num 和 guid }

}

对于上传大的文件需要在配置文件中改iis配置

<system.web>

<httpRuntime maxRequestLength="999999999" />//用户上传文件最大体积 <compilation debug="true" targetFramework="4.0" />

</system.web>

<system.webServer>

转载于:https://www.cnblogs.com/bxbz/p/4186285.html

相关资源：百度webuploader多实例上传

最新回复(0)