<div class="form-group">
|
<label class="col-sm-2 control-label">Upload</label>
|
<div class="col-sm-6">
|
<input type="file" class="form-control" id="upFile" name="upFile">
|
<input type="hidden" id="${id}" value="${upFile!}"/>
|
</div>
|
<div class="col-sm-2">
|
<button class="btn btn-outline btn-success" id="sfFile" type="file" onclick="UploadFileFn()"><i class="fa fa-upload"></i>上传语音</button>
|
</div>
|
</div>
|
<div class="col-sm-12 " style="margin-top: 10px;">
|
<div id="progressBarFile" style="width: 0%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar progress-bar-info"></div>
|
</div>
|
<script>
|
function UploadFileFn() {
|
$("#progressBarFile").html("0%").css("width", "0%");
|
var upFile = $("#upFile").get(0).files[0]; //input file标签
|
var formData = new FormData(); //创建FormData对象
|
var xhr = $.ajaxSettings.xhr(); //创建并返回XMLHttpRequest对象的回调函数(jQuery中$.ajax中的方法)
|
formData.append("file", upFile);
|
//将上传name属性名(注意：一定要和 file元素中的name名相同)，和file元素追加到FormData对象中去
|
if(upFile==undefined || upFile==""){
|
Feng.info("Please select the voice file")
|
return false;
|
}
|
$.ajax({
|
type: "POST",
|
url: Feng.ctxPath + "/upload/file", // 后端服务器上传地址
|
data: formData, // formData数据
|
cache: false, // 是否缓存
|
async: true, // 是否异步执行
|
processData: false, // 是否处理发送的数据 (必须false才会避开jQuery对 formdata 的默认处理)
|
contentType: false, // 是否设置Content-Type请求头
|
xhr: function () {
|
if (OnProgRess && xhr.upload) {
|
xhr.upload.addEventListener("progress", OnProgRess, false);
|
return xhr;
|
}
|
},
|
success: function (data) {
|
if(data=="error"){
|
Feng.error("Error Format");
|
}else {
|
Feng.success("Success！");
|
$("#file1").val(data);}
|
},
|
error: function (data) {
|
Feng.error('Fail！');
|
}
|
});
|
};
|
|
// 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
|
function OnProgRess(event) {
|
var event = event || window.event;
|
var loaded = Math.floor(100 * (event.loaded / event.total)); //已经上传的百分比
|
$("#progressBarFile").html(loaded + "%").css("width", loaded + "%");
|
};
|
</script>
|
