js上傳選擇圖片功能代碼（js上傳圖片並預覽）

本文目錄一覽：

• 1、我需要一個js或者jquery能批量上傳圖片+預覽的功能。急~~~急~~~急~~
• 2、怎樣用js或者jq實現點擊這個圖片就可以選擇上傳還有預覽圖片啊
• 3、求一段JS或Jquery異步上傳圖片的代碼
• 4、用js腳本,怎麼實現彈出選擇圖片的對話框，並將文件上傳到服務器

我需要一個js或者jquery能批量上傳圖片+預覽的功能。急~~~急~~~急~~

Web Uploader 項目，符合你的要求。

1、引入資源

使用Web Uploader文件上傳需要引入三種資源：JS, CSS, SWF。

!–引入CSS–

link rel=”stylesheet” type=”text/css” href=”webuploader文件夾/webuploader.css”

!–引入JS–

script type=”text/javascript” src=”webuploader文件夾/webuploader.js”/script

!–SWF在初始化的時候指定，在後面將展示–

2、Html

首先需要準備一個按鈕，和一個用來存放添加的文件信息列表的容器。

!–dom結構部分–

div id=”uploader-demo”

    !–用來存放item–

    div id=”fileList” class=”uploader-list”/div

    div id=”filePicker”選擇圖片/div

/div

3、Javascript

創建Web Uploader實例

// 初始化Web Uploader

var uploader = WebUploader.create({

    // 選完文件後，是否自動上傳。

    auto: true,

    // swf文件路徑

    swf: BASE_URL + ‘/js/Uploader.swf’,

    // 文件接收服務端。

    server: ”,

    // 選擇文件的按鈕。可選。

    // 內部根據當前運行是創建，可能是input元素，也可能是flash.

    pick: ‘#filePicker’,

    // 只允許選擇圖片文件。

    accept: {

        title: ‘Images’,

        extensions: ‘gif,jpg,jpeg,bmp,png’,

        mimeTypes: ‘image/*’

    }

});

監聽fileQueued事件，通過uploader.makeThumb來創建圖片預覽圖。

PS: 這裡得到的是Data URL數據，IE6、IE7不支持直接預覽。可以藉助FLASH或者服務端來完成預覽。

// 當有文件添加進來的時候

uploader.on( ‘fileQueued’, function( file ) {

    var $li = $(

            ‘div id=”‘ + file.id + ‘” class=”file-item thumbnail”‘ +

                ‘img’ +

                ‘div class=”info”‘ + file.name + ‘/div’ +

            ‘/div’

            ),

        $img = $li.find(‘img’);

    // $list為容器jQuery實例

    $list.append( $li );

    // 創建縮略圖

    // 如果為非圖片文件，可以不用調用此方法。

    // thumbnailWidth x thumbnailHeight 為 100 x 100

    uploader.makeThumb( file, function( error, src ) {

        if ( error ) {

            $img.replaceWith(‘span不能預覽/span’);

            return;

        }

        $img.attr( ‘src’, src );

    }, thumbnailWidth, thumbnailHeight );

});

然後剩下的就是上傳狀態提示了，當文件上傳過程中, 上傳成功，上傳失敗，上傳完成都分別對應uploadProgress, uploadSuccess, uploadError, uploadComplete事件。

// 文件上傳過程中創建進度條實時顯示。

uploader.on( ‘uploadProgress’, function( file, percentage ) {

    var $li = $( ‘#’+file.id ),

        $percent = $li.find(‘.progress span’);

    // 避免重複創建

    if ( !$percent.length ) {

        $percent = $(‘p class=”progress”span/span/p’)

                .appendTo( $li )

                .find(‘span’);

    }

    $percent.css( ‘width’, percentage * 100 + ‘%’ );

});

// 文件上傳成功，給item添加成功class, 用樣式標記上傳成功。

uploader.on( ‘uploadSuccess’, function( file ) {

    $( ‘#’+file.id ).addClass(‘upload-state-done’);

});

// 文件上傳失敗，顯示上傳出錯。

uploader.on( ‘uploadError’, function( file ) {

    var $li = $( ‘#’+file.id ),

        $error = $li.find(‘div.error’);

    // 避免重複創建

    if ( !$error.length ) {

        $error = $(‘div class=”error”/div’).appendTo( $li );

    }

    $error.text(‘上傳失敗’);

});

// 完成上傳完了，成功或者失敗，先刪除進度條。

uploader.on( ‘uploadComplete’, function( file ) {

    $( ‘#’+file.id ).find(‘.progress’).remove();

});

更多細節，請查看js源碼。

怎樣用js或者jq實現點擊這個圖片就可以選擇上傳還有預覽圖片啊

!doctype html

html

head

meta charset=”UTF-8″

meta name=”Generator” content=”EditPlus®”

meta name=”Author” content=””

meta name=”Keywords” content=””

meta name=”Description” content=””

titleDocument/title

script src=”jquery-3.1.1.min.js”/script

/head

body

h3請選擇圖片文件：JPG/GIF/h3

form name=”form0″ id=”form0″

input type=”file” name=”file0″ id=”file0″ multiple=”multiple” /

brbrimg src=”” id=”img0″ width=”120″

/form

/body

script

$(“#file0”).change(function(){

var objUrl = getObjectURL(this.files[0]) ;

console.log(“objUrl = “+objUrl) ;

if (objUrl)

{

$(“#img0”).attr(“src”, objUrl);

$(“#img0”).removeClass(“hide”);

}

}) ;

//建立一個可存取到該file的url

function getObjectURL(file)

{

var url = null ;

if (window.createObjectURL!=undefined)

{ // basic

url = window.createObjectURL(file) ;

}

else if (window.URL!=undefined)

{

// mozilla(firefox)

url = window.URL.createObjectURL(file) ;

}

else if (window.webkitURL!=undefined) {

// webkit or chrome

url = window.webkitURL.createObjectURL(file) ;

}

return url ;

}

$(‘input’).on(‘change’,function(){

var value = $(this).val();

value = value.split(“\\”)[2];

alert(value);

})

/script

/html

求一段JS或Jquery異步上傳圖片的代碼

圖片和文件等流媒體 上傳都是靠from表單的提交。

你可以設置一個隱藏的from表單

裡面有個input id=’file’ type=’file’

選擇玩圖片之後賦值給file

然後用jquery from表單提交即可

form id=”form” runat=”server” enctype=”multipart/form-data” 

input id=’file’ type=’file’

/from

$.ajax({

    url:’XXXX’,//上傳後台路徑

    data:$(‘#form’).serialize(),

    type:”POST”,

    success:function(){

    }

});

用js腳本,怎麼實現彈出選擇圖片的對話框，並將文件上傳到服務器

//要有form標籤，設置提交地址。後面就是後台的事了。

form action=”提交地址” method=”post” enctype=”multipart/form-data”

input type=”button” id=”upload” name=”” value=”選擇” /

input type=”submit” id=”upload” name=”” value=”提交” /

/form

//百度沒給我審核通過：“先介紹算法思路，再給出參考代碼，並對關鍵代碼做注釋說明。提供運行效果截圖。”

//這句話是給百度的：“我真實忍不住要罵人，思路，參考代碼，注釋，還要運行效果截圖！！這一串下來要花多少時間？？你TM是給我發工資還是怎麼！！！？？我給別人解決問題浪費我少許時間我可接收我也算助人為樂，現在到好還要像孫子一樣按你的指示一步步做事？？？？”