您的位置：首页 > Web前端 > JavaScript

图片预览JS

2015-06-04 12:42 537 查看 
工作中，因为遇到图片上传的功能，H5来实现很简单，但要兼容，所以在别人的基础上作修改，本人测试兼容IE6-9。
还有遇到CHANGE事件上传成功后，不能再触发的BUG，因为原来  用<pre name="code" class="html">$(".js-file").on("change",function(){});这样上传成功后，点又上传，CHANGE会无法触发。。后来改为
$(document).on("change",".js-file", function() {}) OK

<!DOCTYPE html> <meta charset="utf-8"> <title>js读取本地图片</title> <script type="text/javascript"> function loadLocalImage(file,id) { var ie6=(!!window.ActiveXObject&&!window.XMLHttpRequest)?true:false; var div=document.getElementById(id); var wh='width:100%;height:100%;display:block;vertical-align:top;';
if (file.files && file.files[0]) { var reader = new FileReader(); reader.readAsDataURL(file.files[0]); reader.onload = function(evt) { div.innerHTML='<img src="'+reader.result+'" style="'+wh+'">'; } } else { if(ie6) { div.innerHTML = '<img src="'+file.value+'"
style="'+wh+'"/>'; } else { file.select(); var src = document.selection.createRange().text; var sFilter='progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'+src+')'; div.style.filter = sFilter; } } } </script> <div id="div1" style="width:200px;height:200px;border:4px
solid #1391E3;position:relative;"></div> <input type="file" name="" id="" onchange="loadLocalImage(this,'div1')" /> <div id="div2" style="width:200px;height:200px;border:4px solid #CB2A16;position:relative;"></div> <input type="file" name="" id="" onchange="loadLocalImage(this,'div2')"
/>另附加一个图片上传的插件 <script src="js/ajaxfileupload.js"></script>用法，其中，回调DATA是取不到返回信息的。。。$.ajaxFileUpload({ url: app.url[3], secureuri: false, fileElementId: 'uploadFile' + i,
data: { 'imgCode': app[expando], //流水号 'actId': actId, 'code': code }, dataType: 'json', success: function(data)
{ self.num++; //两张图完成上传 if (self.checkCompleted()) { setTimeout(function() { self.uploadData(username, yynum,
telnum); }, 500); } } });

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航