图片上传即时显示缩略图解决方法(出自高手“风雪之隅” )
</>code
- <script language="javascript" type="text/javascript">
- var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg'];
- var preivew = function(file, container){
- try{
- var pic = new Picture(file, container);
- }catch(e){
- alert(e);
- }
- }
- //缩略图类定义
var Picture = function(file, container){- var height
- = 0,
- widht
- = 0,
- ext
- = '',
- size
- = 0,
- name = '',
- path
- = '';
- var self
- = this;
- if(file){
- name = file.value;
- if (window.navigator.userAgent.indexOf("MSIE")>=1){
- file.select();
- path = document.selection.createRange().text;
- }else if(window.navigator.userAgent.indexOf("Firefox")>=1){
- if(file.files){
- path = file.files.item(0).getAsDataURL();
- }else{
- path = file.value;
- }
- }
- }else{
- throw "bad file";
- }
- ext = name.substr(name.lastIndexOf("."), name.length);
- if(container.tagName.toLowerCase() != 'img'){
- throw "container is not a valid img label";
- container.visibility = 'hidden';
- }
- container.src = path;
- container.alt = name;
- container.style.visibility = 'visible';
- height = container.height;
- widht = container.widht;
- size = container.fileSize;
- this.get = function(name){
- return self[name];
- }
- this.isValid = function(){
- if(allowExt.indexOf(self.ext) !== -1){
- throw 'the ext is not allowed to upload';
- return false;
- }
- }
- }
</script>
</>code
- <div class='previewDemo'>
- <input id="file" type="file" onchange="preivew(this, document.getElementById('img'));">
- <img id="img" style="visibility:hidden" height="100px" width="100px">
</div>
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛