码迷,mamicode.com
首页 > Web开发 > 详细

h5图片展示和ajax上传

时间:2017-07-26 18:04:04      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:target   logs   event   new   对象   end   图片展示   img   通过   

<img src="" id="img"/>
<script src="http://static.lamian.tv//pc/public/js/jquery-1.8.3.min.js?v=e128811631"></script>
<script>

    $(#file).change(function (e) {
        console.log(event.target.files);
        var files = event.target.files, file;
        if (files && files.length > 0) {
            file = files[0];
            // 来在控制台看看到底这个对象是什么
            // console.log(file);
            // 那么我们可以做一下诸如文件大小校验的动作
            if(file.size > 1024 * 1024 * 2) {
                alert(图片大小不能超过 2MB!);
                return false;
            }
            // !!!!!!
            // 下面是关键的关键,通过这个 file 对象生成一个可用的图像 URL

            // 获取 window 的 URL 工具
            var URL = window.URL || window.webkitURL;
            // 通过 file 生成目标 url
            var imgURL = URL.createObjectURL(file);
            // 用这个 URL 产生一个 <img> 将其显示出来
            $(#img).attr(src, imgURL);
        }
    })
</script>
<script>
var formData = new FormData();
var name = $("input").val();
formData.append("file",$("#upload")[0].files[0]);
formData.append("name",name);
$.ajax({  
        url : Url,  
        type : POST,  
        data : formData,  
        // 告诉jQuery不要去处理发送的数据
        processData : false, 
        // 告诉jQuery不要去设置Content-Type请求头
        contentType : false,
        beforeSend:function(){
               console.log("正在进行,请稍候");
                },
        success : function(responseStr) { 
            if(responseStr.status===0){
                console.log("成功"+responseStr);
            }else{
                console.log("失败");
            }
        },  
        error : function(responseStr) { 
            console.log("error");
        }  
    });
</script>

 

h5图片展示和ajax上传

标签:target   logs   event   new   对象   end   图片展示   img   通过   

原文地址:http://www.cnblogs.com/zenghansen/p/7240176.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!