图片上传前预览，两种方式可实现

Cristalven 发布于2019-06-28 13:35 / 1248人阅读

摘要：表单提交，前端上传头像后台接收提交，前端添加图片添加失败后台接收上传图片上传数据为空上传成功提交，前端全局变量文件上传触发

表单提交，前端html:

后台接收：

file("image")) && $this->validate !== "Users.pass")
        {
            $this["image"] = $this->upload($this["uid"]);
            $this->validate(false)->setEvent(false)->save($this->data);
        }
    }
    protected function upload($id)
    {
        $file = Request::instance()->file("image");
        $image = $file->move(IMAGE_PATH,$id);
        if($image){
            return VIEW_IMAGE_PATH . "/" . $image->getSaveName();
        }
    }
?>

ajax提交，前端html:

后台接收：

file("file");
        if(empty($file)){
            $this->error("上传数据为空");
        }
        else{
            $info = $file->move(IMAGE_PATH."/temp/",time().rand(100,999));
            if($info == false){
                $this->error($file->getError());
            }
            else{
                $image = VIEW_IMAGE_PATH."/temp/".$info->getSaveName();
                $this->success("上传成功",null,$image);
            }
        }
    }
?>

ajax提交，前端html


    




var imgId;//全局变量
//文件上传触发
function upload(id) {
    $("#file").trigger("click");
    imgId = id;
}
$("#file").on("change",function () {
    $("#fileForm").ajaxSubmit(function (result) {
        if(result.code){
            $("#img"+imgId).find("ul img").attr("src", result.data);
            $("#img"+imgId).find("ul input").val(result.data);
        }
        else {
            layer.alert(result.msg,{icon:2});
        }
        $("#file").val("");
    });
});

云服务器 GPU云服务器 asp上传前预览 js文件上传前预览 php 预览上传图片上传图片预览php

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/25739.html

图片上传前预览，两种方式可实现

摘要：表单提交，前端上传头像后台接收提交，前端添加图片添加失败后台接收上传图片上传数据为空上传成功提交，前端全局变量文件上传触发表单提交，前端html: /**上传头像**/ $(#avatar).click(function () { $(#image).trigger(click); }); $(#image).on(change, fu...

cnio 2019-08-01 17:30 评论0 收藏0
图片上传前预览，两种方式可实现

摘要：表单提交，前端上传头像后台接收提交，前端添加图片添加失败后台接收上传图片上传数据为空上传成功提交，前端全局变量文件上传触发表单提交，前端html: /**上传头像**/ $(#avatar).click(function () { $(#image).trigger(click); }); $(#image).on(change, fu...

NervosNetwork 2019-08-20 18:58 评论0 收藏0
移动端上传图片翻转的解决方案

摘要：后续过了几天，公司购置了几台全新的测试机，测试同学将系统在一台三星的机子上一测，又发现新问题了选择完图片进行本地预览时，发现图片翻转了但上传后再展示又是正常的。最近在处理移动端选择图片实时预览并上传时遇到一个问题：上传前图片预览正常，但上传到服务器上的图片展示到页面上时，有时会出现图片翻转的问题，一般是翻转 90 度。后经一翻研究找到了问题所在，特在此记录一下。问题描述接上面提到...

shinezejian 2019-08-19 17:15 评论0 收藏0
上传图片本地预览效果实现（兼容IE8）

摘要：以上传图片为例。我们可以通过获取上传的图片相关信息，但是想要实现本地预览还需要借助来实现可以读取本地图片，并将图片数据转换成编码的字符串形式嵌入到页面中。在我们实现上传图片的效果里，就有用到。图片预览兼容处理及以下版本不支持和。最近项目里需要用到上传图片并预览的功能，于是写了个jQuery预览图片插件，下载地址。如果有需要的，可以直接下载。第一次写jQuery插件，如有不对之处，欢迎...

avwu 2019-08-20 16:54 评论0 收藏0
上传图片实时预览

摘要：引入当使用上传图片文件时，如何在上传到服务器之前，在本地进行预览对象对象允许应用程序异步读取用户计算机上的文件。引入当使用上传图片文件时，如何在上传到服务器之前，在本地进行预览？ FileReader 对象 FileReader对象允许Web应用程序异步读取用户计算机上的文件。使用new创建一个FileReader实例对象： let fileReader = new FileRea...

sourcenode 2019-08-22 16:00 评论0 收藏0