ajaxFileUpload实现图片的上传并预览

先来个最简单的  单图上传并预览

html:

  <script src="/content/js/jquery-1.10.2.min.js"></script>
    <script src="/content/js/ajaxfileupload.js"></script>

引入js文件

<div id="img_upload">
    <img id="head" src="/content/images/head.jpg">
    <p>头像</p>
    <input id="img" name="img" class="hidden" type="file" οnchange="up_head()">
</div>

一个显示图片的标签，一个是文件上传的input标签（设置隐藏）
js:

<pre style="font-family: 宋体; font-size: 9.6pt; background-color: rgb(255, 255, 255);"><pre name="code" class="html"> $("#head").click(function(){
        $("#img").click();
    });

    //异步上传头像并预览
    function up_head(){
        $.ajaxFileUpload({
            url:"index.php?r=admin/uploaduserhead",
            secureuri: false,
            fileElementId:"img",
            dataType: 'text',
            success:function(data,status){
                var res=eval('('+data+')');
                $("#head").attr("src",res.url);
            }
        });
    }

当点击图片的时候，出发input点击事件，弹出文件上传窗口，当文件上传后，触发<span style="font-family: Arial, Helvetica, sans-serif;">up_head()事件，异步上传图片，后台接收图片并保存，返回图片存储位置</span>

<span style="font-family:Arial, Helvetica, sans-serif;">把文件存储的路径赋给img标签的src属性</span>

后台PHP:

  //异步上传用户头像
    public function actionUploaduserhead(){
        $rootPath=dirname(dirname(__FILE__));
        $string=explode('.',$_FILES["img"]["name"]);
        $suffix=$string[count($string)-1];
        $filename=time().".".$suffix;
        $Path=$rootPath."/content/images/userhead/";
        move_uploaded_file($_FILES["img"]["tmp_name"],$Path.$filename);
        $res["url"]="/content/images/userhead/".$filename;
        echo json_encode($res);
    }

接收上传的图片信息，并保存，返回存储的路径

见过有一个帖子，用的是html5的方法上传并预览，但是理解起来有些困难（恕我资质愚钝）,按着自己的理解写了一个，下一篇分享一个多图上传预览的

Ps:第一次写，有不足的地方请多多指正