上传图片-简易

                                    <div class="col-sm-3">
                                        <div class="imguploadbox">
                                                <label for="imgUpload">
                                                <input type="file" id="imgUpload" accept=".png,.jpg" style="display: none">
                                            </label>
                                            <div class="addimg">
                                                <?php if($model->thumb): ?>
                                                    <img src="<?= $model->thumb ?>_120X120.png" class="img-circle" id="user_img"">
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-9">
                                        <div class="editavatarcontrol" style="margin-left:25px;">
                                            <p>支持格式:JPEG / PNG 512X512, < 1MB</p>
                                            <button type="button" class="btn btn-avatar" id="image-change-btn">修改图片</button>
                                        </div>
                                    </div>

  

  $(‘#imgUpload‘).on(‘change‘,function(){
            imgUpload();
    });

    function imgUpload(){
        var formdata = new FormData();
        formdata.append(‘UploadForm[imageFile]‘,$(‘#imgUpload‘)[0].files[0]);
        $.ajax({
            url:‘/site/upload‘,
            type: ‘post‘,
            cache:false,
            data: formdata,
            processData:false,
            contentType:false,
            success:function(data){
                if(data === ‘error‘){
                    $.confirm({
                        title : ‘提示‘,
                        content : ‘图片大小格式不符,请选择合适图片‘,
                        buttons : {
                            confirm : {
                                text : ‘确认‘
                            }
                        }
                    })
                }else{
                var tempImg = $(‘<img/>‘);
                tempImg.attr(‘src‘,data+‘_120X120.png‘);
                tempImg.attr(‘width‘,‘120‘);
                tempImg.attr(‘height‘,‘120‘);
                $(‘#user_img‘).remove();
                $(‘.addimg‘).empty().append(tempImg);
                window.location.reload();
                }
            },
            error:function(e){

                $.confirm({
                    title: ‘提示‘,
                    content: ‘头像上传遇到错误,请检查图片‘,
                    buttons: {
                        confirm: {
                            text: ‘确认‘
                        }
                    }
                })
            }
        })
    }
    $(‘#image-change-btn‘).click(function(){
        $(‘#imgUpload‘).click();
    })

  

时间: 2024-08-08 05:38:20

上传图片-简易的相关文章

django上传图片

django修改头像的功能... 1.在表单中加入enctype="multipart/form-data: 关于表单中enctype的介绍:http://www.w3school.com.cn/tags/att_form_enctype.asp 处理表单的视图会在request中接受到上传文件的数据.FILES是个字典,它包含每个FileField的键 (或者ImageField,FileField的子类).这样的话就可以用request.FILES['File']来存放表单中的这些数据了.

HTML5拖拽上传图片预览

参考博文1:http://blog.csdn.net/testcs_dn/article/details/8695532 参考博文2:http://justcoding.iteye.com/blog/2105760 1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块

一个简易的发布电影票的项目

原文:一个简易的发布电影票的项目 源代码下载地址:http://www.zuidaima.com/share/1601881858886656.htm 在首页(index.html)页面上,按照影片发表时间显示所有影片 点击index.html页面右边的影片类型链接,在页面左边显示对应影片 根据影片的名称进行搜索 当鼠标悬停到影片的图片上,显示影片的详细信息 发布新影片(不要求实现上传图片功能) 发布新影片时可以使用struts2组件上传图片 提供数据库脚本 分层实现 使用struts2框架和j

文件上传利器SWFUpload入门简易教程

凡做过网站开发的都应该知道表单file的确鸡肋. Ajax解决了不刷新页面提交表单,但是却没有解决文件上传不刷新页面,当然也有其它技术让不刷新页面而提交文件,该技术主要是利用隐藏的iFrame, 较Ajax要麻烦许多,而且其提交方式依然在底层是使用的表单file,这里我们不详谈.而且如果是提交较小的文件,我们能接受,如果提交的文件较大,我 们便要忍受很长的等待时间,而浏览器却没有任何提示,我们也没有办法知道文件上传的进度… 但是现在,网上出现了一个名为SWFUpload的上传组件,该组件利用Fl

httpclient 上传图片

背景:前端上传图片,后台接收到,转发给第三方系统或文件系统. jar包 <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient</artifactId> <version>4.5.5</version> </dependency> <dependency> <groupId>org.

HTML5上传图片并预览

一个简易的实现: <!DOCTYPE html> <html> <head> <title>HTML5上传图片并预览</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery

本地上传图片预览

<!DOCTYPE html > <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片上传本地预览,获得图片的base64(可压缩)</title> <style type="text/css"> .upload_image {

java web应用用户上传图片的存储地址

原来工程的上传图片存储地址在web应用的目录下,并且是硬编码到其中的: 每次使用maven tomcat:redeploy以后,这个目录就没有了. 现在想要把上传图片的位置移动到tomcat的webapps目录中专门存放图片的一个目录下. 即,新建的一个images目录用来存放web应用的图片们. 这样就把工程和用户上传图片分离了,以后在redeploy时也不用预先备upload目录,然后再拷贝回去,因而在web应该更新时比较方便些.此外,还想改变文件路径被硬编码到java文件中的现状,所以将文

微信JS-SDK实现上传图片功能

最近在项目开放中,有一个在微信WEB项目中上传图片的需求,一开始使用了传统的<input type="file">的方式去实现,但是后面发现在使用这种传统模式时会由于手机系统的差异而导致一系列的问题,后改用微信JSSDK的方式来实现. 总的来说,利用JSSDK来实现该功能一共分为四步. 1. 调用wx.config(),初始化jssdk的配置,并在jsApiList中配置上传图片需要的四个api('chooseImage','previewImage','uploadIma