ajaxFileUpload单图上传

原创 2015年07月09日 17:09:14

普通的单图头像上传预览效果,比较轻巧

视图的显示,用透明度来隐藏原本点击的input=file,展示自己想要的样式

                <div style="margin-top:10px;"><button>选择图片</button> 建议尺寸:640*320,支持jpg/png/gif格式,大小不超过200K
                    <div id="repeat_file" style="width:60px;height:25px;overflow:hidden;position:relative;top:-20px;opacity:0;filter: Alpha(Opacity=0);">
                       <input type="file" style="" class="absmiddle" name="uploadedfile" id="uploadedfile"><input type=hidden name=Maxsize value=16384000>
                    </div>
                </div>
js方面,插件有小bug,加了小修改

    $(function(){
        var count = -1;
        $("#repeat_file").on("change", "#uploadedfile", function (){
            count++;  
//            $("#upload_status").html("图片上传中....");
            ajaxFileUpload();
            $("#uploadedfile").replaceWith("<input type='file' id='uploadedfile' class='absmiddle' name='uploadedfile' title=" + count + "' />");//重新生成新的
        });

        function ajaxFileUpload(){
            $.ajaxFileUpload({
                url:'<?= Yii::app()->createUrl("user/dealerUser/loadImage");?>', //处理上传文件的程序文件,见下面的php文件代码
                secureuri:false,
                fileElementId:'uploadedfile',
                dataType:'json',
                success:function(data){
                    if(data.msg)
                    {
                        alert(data.msg);
                    }
                    else
                    {
                        $('#mimg').attr('src','dealer/uploads/'+data.file_url).show();
                        $("#uimg").attr('value',data.file_url);
//                        $("#upload_status").html(data.file_url);
                    }
                }
            });
            return false;
        }

    })
controller处理业务

    public function actionLoadImage()
    {
        $res["msg"] = "";//提示信息
        if(empty($_FILES) || $_FILES['uploadedfile']['error'] == 1)
        {
            $res['msg'] = "图片大小不能超过35K,请重新上传";
        }
        else
        {
            if(file_exists($_FILES['uploadedfile']['tmp_name']))
            {
                $imageName = $_FILES['uploadedfile']['name'];
                $ext = substr($imageName, strrpos($imageName, '.')+1);
//                $saveName = time() . ".".$ext;
                if(in_array(strtolower($ext), array('jpg','jpeg')))
                {
                    if($_FILES["uploadedfile"]["size"] / 1024 <= 35)
                    {
                        if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'],'dealer/uploads/'.$imageName)){
                            $res['file_url'] = $imageName;
                        }
                        else
                        {
                            $res["msg"] = "文件上传失败,请重试";
                        }
                    }
                    else
                    {
                        $res['msg'] = "图片大小不能超过35K,请重新上传";
                    }
                }
                else
                {
                    $res["msg"] = "图片格式不对,请上传jpg/jpeg格式";
                }
            }
            else
            {
                $res["msg"] = "请选择要上传的文件";
            }
        }
        $res['msg'] = iconv('GB2312', 'UTF-8', $res['msg']);
        echo json_encode($res);
        exit();
    }




版权声明:本文为博主原创文章,未经博主允许不得转载。

多图上传(ajaxfileupload插件)

前端时间在做一个图片上传的功能,很久之前弄过,但是没有仔细研究,而且现在我需要的是一个可以多图上传的(以前用的就是讲图片转换成流然后发往后端),fileupload,fileuploadfive,aj...

struts2+ajaxfileupload完成单图片无刷新上传

一、项目结构图

springmvc带文件上传的form表单提交,用 jquery的ajaxfileupload或使用dropzone上传图文详解

方法一和方法二处理思路一致,分两步提交:第一步 提交图片到文件服务器,并返回图片所在文件服务器的地址如:xxx/aaa.jpg,把文件地址(xxx/aaa.jpg)放到页面隐藏域。.第二步 提交表单 ...

jfinal文件form表单上传,ajaxfileupload异步上传

JFinal文件上传官网文档描述如下:getFile 文件上传Controller提供了getFile 系列方法支持文件上传。特别注意:如果客户端请求为 multipart request(form ...

js实现多图上传和预览(包含表单上传、ajax上传)

包含的知识点有:(仅考虑手机端,pc兼容性不清) 1.浏览器自带的表单上传(页面会跳转) 2.ajax上传(异步刷新) 3.创建元素的简单封装 4.ajax简单封装 5.手机端标准html书写 ...

jQuery多图上传带ajax提交

  • 2017年11月28日 16:28
  • 35KB
  • 下载

ThinkPHP+swfupload多图上传

  • 2017年05月08日 15:47
  • 1.48MB
  • 下载

头像截图上传两种方式(SWFUpload、一个简单易用的flash插件)

SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。另一...

Asp.Net Mvc 多图上传

  • 2015年04月29日 18:25
  • 5.74MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ajaxFileUpload单图上传
举报原因:
原因补充:

(最多只允许输入30个字)