如何使用js实现IE9下上传图片并预览

JavaScript018

如何使用js实现IE9下上传图片并预览,第1张

<div >

<div id="headImgPicview">

<img src="" id="headImgPic" width="200" height="auto"/>

</div>

<input type="text" id="headImgShow" name="headImg"

placeholder="图片(.jpg .jpeg .png)" size="40"

pattern="(.jpg$)|(.jpeg$)|(.png)|(.JPG$)|(.JPEG$)|(.PNG$)"

data-foolish-msg="请选择图片！"

value=""

required readonly/>

<div class="am-form-group am-form-file" style="width: 175px">

<button type="button" class="am-btn am-btn-default am-btn-sm">

<i class="am-icon-cloud-upload"></i>选择要上传的图片</button>

<input type="file" id="headImg" onchange="imgcheck('headImg',this)" multiple>

</div>

</div>

//文件动态上传方法+格式判断

function imgcheck(imgid,file){

if(!(/.jpg$/.exec($('#'+imgid).val())||(/.png/.exec($('#'+imgid).val()))||(/.jpeg$/.exec($('#'+imgid).val()))

||(/.JPG$/.exec($('#'+imgid).val()))||(/.PNG$/.exec($('#'+imgid).val()))||(/.JPEG$/.exec($('#'+imgid).val())) )){

alert("图片格式不正确！应为：.jpg .jpeg .png")

$('#'+imgid).val('')

}else{

var imgURL = document.getElementById(imgid)

$('#'+imgid+'Show').attr('placeholder',imgURL.value)

//调用图片预览

previewImage(imgid+'Pic',file)

angularjs支持ie9的，但是代码的兼容写法如下：

为确保Angular应用在IE上能够工作请确认：

1. 在IE9或更早的版本上polyfill JSON.stringify。可以使用JSON2或JSON3来polyfills。

<!doctype html>

<html xmlns:ng="http://angularjs.org">

<head>

<!--[if lte IE 7]>

<script src="/path/to/json2.js"></script>

<![endif]-->

</head>

<body>

...

</body>

</html>

2. 在连接处将id="ng-app"添加到根元素，使用ng-app属性

<!doctype html>

<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">

...

</html>

3. 不能使用自定义的元素标记，像<ng:view>(使用属性版本<div ng-view>来代替)，或

4. 如果必需要用自定义元素标记，然后必须采取以下步骤以确保IE9及之前版本都能用：

<!doctype html>

<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">

<head>

<!--[if lte IE 9]>

<script>

document.createElement('ng-include')

document.createElement('ng-pluralize')

document.createElement('ng-view')

// Optionally these for CSS

document.createElement('ng:include')

document.createElement('ng:pluralize')

document.createElement('ng:view')

</script>

<![endif]-->

</head>

<body>

...

</body>

</html>

5. 使用ng-style标记来替代style="{{ someCss }}"。后续的版本能够在Chrome和Firefox下工作但不能在IE版本＜＝11下工作（在撰写本文时的最新版本）。

它是状态304，表示“未修改”

后面的200，表示：确定。客户端请求已成功。

所以有效的只有一次，在js或css链接后添加随机数即可，表示每次都不从缓存中取得。