描述：

本文介绍利用ajax上传图片实现预览，并保存路径，form表单无须使用enctype="multipart/form-data"。

原理：

浏览文件请求上传图片接口upload，上传成功返回数据保存在隐藏的input内，并命名为字段名称image，最后表单保存来存储数据。

代码如下（本文使用thinkphp5.0框架作演示）：

上传接口代码：

1，控制器代码

/**
 * 上传图片
 * @return
 * status  上传状态 1成功0失败
 * msg     返回上传消息
 * file_id 上传图片文件id
 * url     上传图片返回路径
 */
public function upload(){
    return model('admin/File')->uploadImg();
}

2，模型代码

/**
    * 上传图片
    * @return
    * status  上传状态 1成功0失败
    * msg     返回上传消息
    * file_id 上传图片文件id
    * url     上传图片返回路径
    */
public function uploadImg($file='file',$location='admin'){
   // 获取表单上传文件 例如上传了001.jpg
   if (!empty($_FILES[$file]['name'])){
      $file = request()->file($file);
      // 移动到框架应用根目录/public/uploads/ 目录下
      $info = $file->validate(['size'=>1024*2*1000,'ext'=>'jpg,png,gif'])->move(ROOT_PATH . 'public' . DS . 'uploads'. DS . $location);
           if($info){
         // 成功上传后 获取上传信息
         $data['url']='/uploads/'.$location.'/'.str_replace('\\','/',$info->getSaveName());
         $data['original']='/uploads/'.$location.'/'.str_replace('\\','/',$info->getSaveName());
         $data['ext']=$info->getExtension();
         $data['size']=$info->getSize();
         $data['create_time']=time();
         $rs=Db::name('file')->insertGetId($data);
         if ($rs>0){
            $msg['status']='1';
            $msg['msg']='上传成功';
            $msg['file_id']=$rs;
                   $msg['url']=$data['url'];
            return $msg;
         }else{
            $msg['status']='0';
            $msg['msg']='上传失败';
            return $msg;
         }
      }else{
         // 上传失败获取错误信息
         $msg['status']='0';
         $msg['msg']=$file->getError();;
         return $msg;
      }
   }
}

3，html代码

<!--1、input框-->
<input type="text" readonly="readonly" name="image" value="" class="image0 tpl-form-input">
<!--2、浏览选择图片-->
<input type="file"  class="file input-file" number="0" class="file input-file" multiple="multiple" class="tpl-form-input">
<!--3、预览按钮-->
<a type="button" href="javascript:void(0);" class="image0">预览</a>
<!--上传后的预览小图-->
<img src="" class="img0" style="max-width: 30px; max-height: 30px;" />

4,javascript代码

<script>
//上传图片
    $(document).on('change',".file",function(){
        var obj=this;
        var action = "{:url('kbcms/admin_upload/upload')}";
        var file=obj.files[0];
        var xhr = new XMLHttpRequest();
        xhr.open("post", action, true); // 上传地址
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var str = $.parseJSON(xhr.responseText); // 返回格式，此处为json，可以为别的格式
                    if (str.status==1){
                        var objUrl = getObjectURL(file) ;
                        //console.log("objUrl = "+objUrl) ;
                        var num=$(obj).attr("number");
                        if (objUrl) {
                            $(".img"+num).attr("src", objUrl);
                            $(".image"+num).val(str.url);
                            $(".image"+num).attr('href',str.url);
                            $(".image"+num).attr('target','_blank');
                            //target="_blank"
                        }
                    }else{
                        alert(str.msg);
                    }
                }
            }
        }
        var fd = new FormData();
        fd.append('file', file);
        xhr.send(fd);
    }) ;
    //建立一個可存取到該file的url
    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
</script>