点击添加本地图片的前端效果制作

UI就一般就行。

1.实现点击打开本地上传图片窗口。

方法1：给UI样式"input"的父标签加绝对定位，在UI样式"input"标签后面加<input type="file">，给这个标签设置宽度大小都跟UI样式"input"标签的宽高一致然后通过定位在其上，透明度设为0，这样就可以了。

方法2：不用给UI样式"input"的父标签加绝对定位，<input type="file">随便放在页面的任何地方，给其加隐藏，然后给其加事件绑定。绑定一个click事件，然后将这个绑定好的click事件函数放入UI样式"input"标签中的onclick事件中，这样在每次点击的时候就会触发<input type="file">的点击事件。

<script>
function informationREFile(){
return $('#informationREFile').click();
}
</script>

 

2.实现点击上传图片之后的图片预览

方法1：取图片img的上一级标签的classname或者idname。加上实现预览功能的JS。

<script>
function previewByCreateObjectURL(file) {
var img = new Image(), url = img.src = URL.createObjectURL(file);
var $img = $(img);
img.onload = function() {
URL.revokeObjectURL(url)
$('.inforRRI-images-change').empty().append($img); //显示图片img的父级class或ID
}
}
function preview(objURL){
var img = new Image(),url=img.src=objURL;
var $img = $(img);
img.onload = function() {
URL.revokeObjectURL(url)
$('.inforRRI-images-change').empty().append($img);//显示图片img的父级class或ID
}
}
function createObjURL(file){
return URL.createObjectURL(file);
}
$(function() {
$('#informationREFile').change(function(e) {//显示图片img的父级class或ID
var file = e.target.files[0];
previewByCreateObjectURL(file);
})
});
</script>

方法2：

<script type="text/javascript">
//下面用于图片上传预览功能
function setImagePreview(avalue) {
var docObj = document.getElementById("img");//type="file"的input的ID

var imgObjPreview = document.getElementById("preview");//显示图片的ID
if (docObj.files && docObj.files[0]) {
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '100px';
imgObjPreview.style.height = '80px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();

//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
} else {
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "100px";
localImagId.style.height = "80px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters
.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
} catch (e) {
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>

 

注意事项：提交表单数据的时候如果表单中有图片需要在form中加enctype="multipart/form-data"