内乡程序:jquery+html5实现单张图片上传预览 尚春台,ai2hao.com 

内乡程序:jquery+html5实现单张图片上传预览

导读:内乡程序:jquery+html5实现单张图片上传预览

<style>

#pic{

            

            height:50px;

            cursor: pointer;

margin-left:3%;

margin-top:10px;

            } </style>

<p>

    

</p>

<p>

    <img id="pic" src title="上传图片:700px*350px"/> <input id="upload" name="file" accept="image/*" type="file" style="display: none"/>

</p><script>

var fsrc;

$(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中,显示出图片

             }

var file  =  $(this)[0].files[0];

var href = "/index/Ajax/fapic";

var formData = new FormData();

formData.append("file",file);

$.ajax({

type:"post",

url:href,

data:formData,

dataType:"json",

async:false,

processData:false,

cendndnType:false,

success:function(result){

if(result.code==200){

fsrc = result.msg;

                     $("#img145").append(fsrc);

}

}

  

    });

               });

             });

 

            });

 

           //建立一個可存取到該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>


广告位置