input type=file，图片显示上传

1.布局

<div class="z-photo">

<div class="z_file">

<input type="file" name="file" id="file" value="kkk" runat="server" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" multiple="multiple" onchange="imgChange('z_photo','z_file');"/>

</div></div>

2.获取input file里的文本信息

function imgChange(obj1, obj2) {//获取点击的文本框

var file = document.getElementById("file");//存放图片的父级元素

var imgContainer = document.getElementsByClassName(obj1)[0];//获取的图片文件

var fileList = file.files;//文本框的父级元素

var input = document.getElementsByClassName(obj2)[0];

$.ajaxFileUpload({

url: "{:U('Grzx/dosfone')}",

secureuri: false, // 一般设置为false  

fileElementId: ['file'],fileFilter:'jpg,png', // 文件上传表单的id

dataType: 'text', // 返回值类型 一般设置为json               

 type:'post',        

        data:{},            

    progress:function(ect){   

             var percentComplete=Math.round(ect.loaded*100/ect.total);     

           if(percentComplete==100) 

percentComplete=98 //已经上传100%，留2%留给后台操作       

         loading1();                },  

              success: function(data) // 服务器成功响应处理函数  {

                //loading1();

                    var obj = eval("("+data+")");               

   if(obj['success'] == '1') 

{$('.loaders').css('display','none');

alert('上传成功');

location.reload(true);

} else {

alert('上传失败');

}

$('.head-right').html('编辑');}});

// location.reload(true);

loading1();

imgRemovef();};另外的function

注；

ajax上传文件需要引入ajaxfileUpload.js文件