圖片本地上傳預覽

阿新 • • 發佈：2017-05-17

dao tom favicon 查看 else ada author chang dataurl

在IE裏面顯示的話，你可以用div直接顯示圖片，不通過img來添加SRC，這樣就不會有小圖標出現

例子：

var file_upl = document.getElementById("file");

file_upl.select();

獲取圖片路徑 var imgpath=document.selection.createRange().text;

註意imgPreDiv 為圖片顯示的div的ID ！！！ document.getElementById("imgPreDiv").style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=‘true‘,sizingMethod=‘scale‘,src=\""+ imgpath + "\")";//使用濾鏡效果

技術分享

我寫了一個兼容版本

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
    <meta name="description" content="圖片本地上傳預覽">
    <meta name="author" content="jiangxiaobo">
    <link rel="icon" href="favicon.ico">
    <title>圖片本地上傳預覽</title>
    <!-- <link rel="stylesheet" type="text/css" href="css/*.css"> -->

    <style type="text/css">
    .preview {
        position: relative;
        width:260px;
        height:190px;
        border:1px solid # 
000;
        overflow:hidden;
    }
    .preview .imghead {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-size: 100%;
    }
    .preview .input-file {
        position: absolute;
        left: -1000px;
        top: -1000px;
    }
     
</style>
</head>
<body>
    
    <div class="preview">
        <label class="imghead">
            <input class="input-file" type="file" accept="image/*" onchange="previewImage(this)" />
        </label>
    </div>
    
    <script type="text/javascript" src="./Public/web/js/jquery.1.8.3.min.js"></script>
    <script type="text/javascript">
        function previewImage(file){
            // console.log(file.files);
            var imghead = $(file).parent(‘.imghead‘);
            var preview = imghead.parent(‘.preview‘);
            var imgheadOffset = imghead.offset();
            var rect = {
                top : imgheadOffset.top,
                left : imgheadOffset.left,
                width : imghead.width(),
                height : imghead.height()
            };
            if(file.files && file.files[0]){
                // 主流瀏覽器
                var reader = new FileReader();
                reader.onload = function(evt){
                    imghead.css(‘background-image‘,‘url(‘+evt.target.result+‘)‘);
                };
                reader.readAsDataURL(file.files[0]);
            }else{
                //兼容IE
                file.select();
                var src = document.selection.createRange().text;
                preview.css(‘filter‘,‘progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="‘+src+‘")‘);
            }
        }
    </script>
</body>
</html>

圖片本地上傳預覽

dao tom favicon 查看 else ada author chang dataurl 在IE裏面顯示的話，你可以用div直接顯示圖片，不通過img來添加SRC，這樣就不會有小圖標出現例子： <div class="banner_up_pic" id="i

Thinkphp+Jqueryfrom圖片非同步上傳預覽

讓圖片非同步上傳到專案目錄中，讓使用者或管理員在上傳頭像或商品圖片可以提前預覽是否要上傳的正確用第三方外掛JQueryfrom來實現這功能在檢視檔案中匯入JQuery和JQueryfrom檔案 <load file="__PUBLIC__/js_css/jque

mui 圖片的上傳預覽

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

JS原生實現本地圖片上傳預覽

執行方式如下： $("input").change(function() { var config = { imgWrapWidth: 300, //px imgWrapHeight: 200, //px imgMaxWidth: "100%", im

圖片上傳預覽

bject too sca 圖片格式 else 遍歷 bsp turn filters Js腳本頁面 <!doctype html> <html> <head> <meta charset="utf-8"> <titl

二十七、單張圖片上傳預覽

第一部分 ajax 效果 document 圖片 pos itl .data title html部分 <div class="new-store-phone"> <span class="phone-title">營業執照 

簡單的做一個圖片上傳預覽（web前端）

chrom 預覽 web前端 console fine 分享圖片 fire title right 轉載：點擊查看原文在做web項目很多的時候圖片都是避免不了的，所以操作圖片就成了一個相對比較棘手的問題，其實也不是說很麻煩，只是說上傳然後直接預覽的過

html5實現圖片上傳預覽

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #te

vue自定義圖片上傳預覽功能

//vue裡面的HTML程式碼 <div id="modificationPreview"> <input type="file" accept="image/*" @change="changeFile" id="m

圖片上傳預覽（可根據自己得需要封裝元件）

話不多說，先上圖實現簡單得多行多圖片上傳，可以選擇其中任意一個圖片當作你需要得預設圖傳到後臺，然後一次性提交圖片上傳重要得也就兩個屬性：new FormData()和new FileReader() 程式碼： <template> <

js圖片上傳預覽功能相容實現

<html> <head> <title>js圖片上傳預覽</title> <script> function PreviewImage(imgFile) { var filextension=imgFile.value.subst

純js批量上傳預覽圖片

前提：<script src="js/jquery.min.js"></script> 參考：http://www.jq22.com/jquery-info833 1.頁面程式碼

HTML5 手機端圖片上傳預覽

1、html頁面 <div class="addFile"> <p class="company">資料上傳</p> <div class="photoes getoutinput"> <div class="uplist">

圖片貼上上傳,預覽——相容ie（手動上傳）和谷歌瀏覽器（貼上或拖拽上傳）

1.優化上傳的css： .img-class { width: 525px; height: 290px; } .img-paste-class { width: 530px; height: 330px; } .a-file {

IE9上傳/預覽圖片(自適應)

$("input").change(function () { var fileObj = $(this)[0]; var windowURL = window.URL || window.webkitURL; var dataURL;

圖片上傳預覽的簡單程式碼

效果如下圖程式碼如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=dev

springmvc圖片上傳、jquery 圖片上傳預覽

寬為限緊用功功夫到滯塞通簡介專案需求，需要做圖片上傳功能，圖片上傳肯定得給個預覽嘛，然後就找了下面這個方案 ajaxfileupload外掛上傳 ajaxfileupload.js網上傳了好幾個版本，選擇自己可以使用的就好了。這個外掛是N多

jquery.fileupload.js外掛使用初探--多圖片上傳預覽

一、前臺程式碼： <!DOCTYPE html> <html> <head> <title>jquery.fileupload.js使用測試</title> <script src="jq

前端js實現圖片上傳預覽

前端js實現圖片上傳前端js實現圖片上傳的原理是通過input標籤的type=file屬性將input標籤定義為上傳檔案，對input進行onchange事件的監聽，當input的value值改變時代表使用者已經上傳了圖片，而input的value值就是使用者上傳的圖片的相對路徑，new

Jcrop外掛+Canvas實現圖片上傳預覽+圖片裁剪上傳

前言想實現一個功能：使用者點選上傳按鈕，選擇圖片後。圖片顯示在一個彈出框上，並可以對圖片進行裁剪。裁剪後的圖片顯示在頁面上。提交表單即可上傳圖片。遇到問題瀏覽器的安全設定不讓使用者獲取上傳的圖片路徑，實際獲取的是c:\fakepath\a.jp

圖片本地上傳預覽

相關推薦