jquery图片上传显示缩略图简单应用

来源:未知 人浏览 2017.06.30

css

#pic{
width:100px;
height:100px;
margin:20px auto;
cursor: pointer;
}
<form action="" method="post" enctype="multipart/form-data">
<table cellpadding="0" cellspacing="0" class="list-table">
<input type="hidden" name="id" value="{$typeid}" />
                        <tr>
                            <th>缩略图上传</th>
                            <td>
                                <img id="pic" src="" style="border:1px solid #ececec;" >
                                <input id="upload" name="file" accept="image/*" type="file" style="display: none"/>
                            </td>
                        </tr>
<tr><th></th><td><input type="submit" value="提交修改" class="co_submit" /></td></tr>
</table>
</form>

js

<script type="text/javascript">
$(function() {
    $("#pic").click(function () {
        $("#upload").click();//隐藏了input:file样式后,点击头像就可以本地上传
        $("#upload").on("change",function(){
            var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径,该路径不是图片在本地的路径
            if (objUrl) {
                $("#pic").attr("src", objUrl) ; //将图片路径存入src中,显示出图片
            }
        });
    });
});
 
//建立一個可存取到該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>

然后接收POST请求即可了

input:file事件是上传类型 

 较常用的属性值如下: 

accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表。 

 若要支持所有图片格式,则写 * 即可。 

multiple:是否可以选择多个文件,多个文件时其value值为第一个文件的虚拟路径


input:file的样式是不变的,所以若要改变它的样式,首先将它隐藏。display:none;


星期三
15年12月16日
热门板块
windows 10下载设计软件下载PhotoShop CC文章分享Portraiture磨皮win10安装教程
热门下载
Lightroom 5.2官方中文版下载下载(

Lightroom 5.2官方中文版下载下载(

下载
PhotoShop CC下载官方正版可激活版本

PhotoShop CC下载官方正版可激活版本

下载