ajax图片上传

来源:互联网 发布:手机铃声编辑软件 编辑:程序博客网 时间:2024/06/04 01:10

1.首先引用一个js类库

 下载地址链接:http://pan.baidu.com/s/1qXZKs4c 密码:7wq9

2.视图文本代码

切记在form表单中加入 enctype="multipart/form-data" 

                        <input type="file" class="form_file" name="pic" id="pic" > <!--文件上传的文本框-->
                        <div id='tupian' style='display:none'>   <!--显示图片-->
                            <img src="" id="friends_pic" name="friends_pic" style="width:210px;height:100px;">
                        </div>

3.写入js代码

//照片异步上传
     $('#pic').change(function(){ //此处用了change事件,当选择好图片打开,关闭窗口时触发此事件


        var pic = $("#pic").val();
         $.ajaxFileUpload({
            
             url:'', //处理图片的脚本路径
             type: 'post', //提交的方式
             secureuri :false, //是否启用安全提交
             fileElementId :'pic', //file控件ID
             dataType : 'json', //服务器返回的数据类型 
             data :{'pic':pic},
             success : function (oData){ //提交成功后自动执行的处理函数
               $('#uploads').val(oData); 
               $('#friends_pic').attr('src',oData);
               $('#tupian').css('display','block');
             },
             error: function(data, status, e){ //提交失败自动执行的处理函数
                alert(e);
             }
     })
 });

4.最后写入控制代码

$upFilePath = $name ='' ;
$pic = _POST('pic');
    $ext = strrchr($pic,'.'); 
$upFilePath = 'friends/'. date('Y').'/' . date('m') . '/'. date('d');
        $name = date("Ymdhis").rand(1000,9999).$ext;
   //确保目录可写
Helper::ensure_writable_dir($upFilePath);
$ok = @move_uploaded_file($_FILES['pic']['tmp_name'],$upFilePath.'/'.$name);
$filename = $upFilePath.'/'.$name ;
echo json_encode($filename);

0 0
原创粉丝点击