Jquery ajax上传formdata+Thinkphp无刷新上传商品视频文件

前端页面
<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异步上传这样做感觉挺不错,但因考虑不全面,可能有缺漏.以上部分源码参考网络,在此感谢.
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值