js实现图片上传（js实现图片上传功能）

<style>

.progress {

width:9%;

height:10px;

border:1px solid #ccc;

margin-bottom:6px;

margin-left: 85px;

margin-top: -10px;

display: none;

}

.bgpro {

display:block;

width:9px;

background:#c0c4cf;

height:10px;

color:#fff;

text-align: center;

font-size: 8px;

}

</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="';

file.select();

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

div.innerHTML = '<img id=imghead>';

var img = document.getElementById('imghead');

img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;

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

status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);

div.innerHTML = "<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 = "";

}

}