前言:经测试,在firefox、chrome、IE急速模式下可用。
1、html结构
<label class="col-sm-2 control-label">背景图片</label>
<div class="col-sm-9">
<input id="FBackpic" type="file" name="FBackpic" style="display:none">
<input id="lefile" type="text" class="form-control">//显示图片路径
<button class="btn btn-success fileinput-button"
οnclick="$('input[id=FBackpic]').click();" type="button">请选择</button>
</div>
</div>
<img id="backpic"></img>
2、jQuery
$("#FBackpic").change(function () {
var $file = $(this);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;//图片路径
var $img = $("#backpic");
$("#backpic").width("280");
$("#backpic").height("280");
$("#backpicid").val("0");
$("#img1").hide();
if (fileObj && fileObj.files && fileObj.files[0]) {
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$img.attr('src', dataURL);
$("#picUrl").val(dataURL);//把地址展示在input框,无其他用
} else {//IE兼容模式
dataURL = $file.val();
var imgObj = document.getElementById("backpic");
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
$("#picUrl").val(dataURL);//把地址展示在input框,无其他用
}
});