< style >

. progress {

width :9%;

height :10 px ;

border :1 px solid #ccc ;

margin-bottom :6 px ;

margin-left : 85 px ;

margin-top : -10 px ;

display : none ;

}

. bgpro {

display : block ;

width :9 px ;

background : #c0c4cf ;

height :10 px ;

color : #fff ;

text-align : center ;

font-size : 8 px ;

}

</ style >

< div id=”preview” >

< img id=”imghead” class=”pic_show” border=0 src=”__STATICS_DOMAIN__/public/boss/images/imgbg.png” width=”100″ height=”100″ />

</ div >

< input type=”button” value=”选择logo” class=”btn” />

< input type =” file ” onchange=” previewImage( this ) ” class=”file” name=”pic” />

< a >（请选取 100 X 100正方形logo以便达到最佳展示效果）</ a >

</ div >

< div class=”progress” >< span class=”bgpro” ></ span ></ div >

$( ‘input[name=”pic”]’ ).on( ‘change’ , function () {

if ( typeof this .files == ‘undefined’ ){

return ;

}

var img = this .files[0];//获取图片信息

var type = img.type;//获取图片类型，判断使用

var url = getObjectURL( this .files[0]);//使用自定义函数，获取图片本地url

var fd = new FormData ();//实例化表单，提交数据使用

fd.append( ‘pic’ ,img);//将img追加进去

if (url)

$( ‘.pic_show’ ).attr( ‘src’ ,url).show();//展示图片

if (type.substr(0,5) != ‘image’ ){//无效的类型过滤

alert( ‘非图片类型，无法上传！’ );

return ;

}

//开始ajax请求，后台用的tp

$.ajax({

type : ‘post’ ,

url : dolphin . image_upload_url ,

data : fd,

processData : false , // tell jQuery not to process the data ，这个是必须的，否则会报错

contentType : false , // tell jQuery not to set contentType

dataType : ‘text’ ,

xhr : function () {//这个是重点，获取到原始的xhr对象，进而绑定upload.onprogress

var xhr = jQuery. ajaxSettings .xhr();

xhr.upload.onprogress = function (ev) {

//这边开始计算百分比

var parcent = 0;

if (ev.lengthComputable) {

percent = 100 * ev.loaded / ev.total;

percent = parseFloat( percent ).toFixed(2);

$( ‘.progress’ ).show();

$( ‘.bgpro’ ).css( ‘width’ , percent + ‘%’ ).html( percent + ‘%’ );

}

};

return xhr;

},

success: function (data){

alert(data)

}

});

});

//自定义获取图片路径函数

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 ;

}

PHP

1. Array
2. (
3. [name] => cooff
4. [email] => qq.comaa
5. )
6. Array
7. (
8. [file] => Array
9. (
10. [name] => yunce2.0测试.apk
11. [type] => application/vnd.android.package-archive
12. [tmp_name] => /tmp/php4Jxt0c
13. [error] => 0
14. [size] => 6476627
15. )
17. )

图片上传插件

function previewImage(file) {

console .log(4444)

var MAXWIDTH = 180;

var MAXHEIGHT = 180;

var div = document .getElementById( ‘preview’ );

if (file.files && file.files[0]) {

div. innerHTML = ‘<img id=imghead>’ ;

div. innerHTML += ‘<span class=”closeimg” onclick=” closeimg ()”></span>’ ;

var img = document .getElementById( ‘imghead’ );

img.onload = function () {

console .log(5555)

var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img. offsetWidth , img. offsetHeight );

img. width = rect.width;

img. height = rect.height;

// img.style.marginLeft = rect.left+’ px ‘;

img. style . marginTop = rect.top + ‘px’ ;

}

var reader = new FileReader ();

reader. onload = function ( evt ) {

img. src = evt.target.result;

}

reader.readAsDataURL(file.files[0]);

} else //兼容IE

{

var sFilter = ‘filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=”‘%20;%20

%20

%20file.select();%20

%20

%20var%20%20src%20=%20%20document%20.%20selection%20.createRange().%20text%20;%20

%20

%20div.%20innerHTML%20%20=%20%20‘<img%20id=imghead>’%20;%20

%20

%20var%20%20img%20=%20%20document%20.getElementById(%20‘imghead’%20);%20

%20

%20img.%20filters%20.item(%20‘DXImageTransform.Microsoft.AlphaImageLoader’%20).%20src%20%20=%20src;%20

%20

%20var%20%20rect%20=%20clacImgZoomParam(MAXWIDTH,%20MAXHEIGHT,%20img.%20offsetWidth%20,%20img.%20offsetHeight%20);%20

%20

%20status%20%20=%20(%20‘rect:’%20%20+%20rect.top%20+%20%20‘,’%20%20+%20rect.left%20+%20%20‘,’%20%20+%20rect.width%20+%20%20‘,’%20%20+%20rect.height);%20

%20

%20div.%20innerHTML%20%20=%20%20“<div id=divhead style=’width:” + rect.width + “px;height:” + rect.height + “px;margin-top:” + rect.top + “px;” + sFilter + src + “\”‘></div>” ;

}

}

function clacImgZoomParam(maxWidth, maxHeight, width, height) {

var param = {

top : 0,

left : 0,

width : width,

height : height

};

if (width > maxWidth || height > maxHeight) {

rateWidth = width / maxWidth;

rateHeight = height / maxHeight;

if ( rateWidth > rateHeight ) {

param.width = maxWidth;

param.height = Math .round(height / rateWidth );

} else {

param.width = Math .round(width / rateHeight );

param.height = maxHeight;

}

}

param. left = Math .round((maxWidth – param.width) / 2);

param. top = Math .round((maxHeight – param.height) / 2);

return param;

}

function closeimg(){

$( ‘#preview’ ). find ( ‘img’ ).attr( ‘src’ , ‘../public/boss/images/imgbg.png’ );

$( ‘#preview’ ).find( ‘span’ ).remove();

console .log($( ‘#preview’ ).find( ‘input’ ).val());

var file = document .getElementById( “fileInput” );

if (file. outerHTML ) {

file. outerHTML = file. outerHTML ;

} else { // FF(包括3.5)

file. value = “” ;

}

}