前端页面
<input value="{$info.video}" id="video" name="info[video]" type="hidden" />
<input type="file" id="file" name="file" οnchange="showPic()" />
<div id="parent">
<div id="son"></div>
</div>
<script type="text/javascript">
function showPic(){
var pic = $("#file").get(0).files[0];
//$("img").prop("src" , window.URL.createObjectURL(pic) );
uploadFile();
}
function uploadFile(){
var pic = $("#file").get(0).files[0];
var formData = new FormData();
formData.append("file" , pic);
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
var uplodeAudio_url = '{:U("UploadAudio/upGoodsAudio")}';
$.ajax({
type: "POST",
url: uplodeAudio_url,
data: formData ,
processData : false,
//必须false才会自动加上正确的Content-Type
contentType : false ,
xhr: function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener("progress" , onprogress, false);
return xhr;
}
},
success:function (result) {
console.log(result['savepath']);
$('#video')[0].value=result['savepath'];//显示上传文件路径
}
});
}
/**
* 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
*/
function onprogress(evt){
var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = Math.floor(100*loaded/tot); //已经上传的百分比
$("#son").html( per +"%" );
$("#son").css("width" , per +"%");
}
</script>
后台接收UploadAudioController.php
class UploadAudioController extends Controller {
//商品视频上传
Public function upGoodsAudio () {
if (!IS_POST) E('页面不存在');
$upload = $this->_upload();
echojson($upload);
}
/**
* 商品视频上传处理
* @return [Array] [上传信息]
*/
Private function _upload () {
$config = array(
'maxSize' => 0,//上传的文件大小限制 (0-不做限制)
'rootPath' => C('UPLOADS_PICPATH'),//保存根路径
'savePath' => C('GOODS_PICPATH') . '/',//商品图片保存路径
'saveName' => array('uniqid',''),//保存文件名
'exts' => array('flv','mp3','mp4','avi'),//允许上传的文件后缀
'autoSub' => true,//自动子目录保存文件
'subName' => array('date','Ymd'),//子目录创建方式,[0]-函数名,[1]-参数,多个参数使用数组
);
$upload = new \Think\Upload($config);// 实例化上传类
$info = $upload->upload();
$info = $info['file'];
if(!$info) {// 上传错误提示错误信息
return array('status' => 0, 'msg' => $upload->getError());
}else{// 上传成功 获取上传文件信息
$uploadImg = $info['savepath'] . $info['savename'];//上传的图片和路径
$cutImgUrl = C('UPLOADS_PICPATH').$info['savepath'] . $info['savename'];
//return $this->_goodsDispose($info['savepath'],$info['savename'],$cutImgUrl);
return array(//返回数据
'status' => 1,
'savepath' => $uploadImg,
'msg' => '上传成功!'
);
}
}
ajax异步上传这样做感觉挺不错,但因考虑不全面,可能有缺漏.以上部分源码参考网络,在此感谢.