pc端图片上传

Html

Css

function show(imgID, iptfileupload) { // 接收传过来的img标签的ID 和 当前input的框的ID
    var file_img = document.getElementById(imgID),
        iptfileupload = document.getElementById(iptfileupload);
    // 调用上传图片函数
    getPath(file_img, iptfileupload, file_img);
};

//上传图片函数封装
function getPath(obj, fileQuery, transImg) {

var imgSrc = '',
        imgArr = [],
        strSrc = '';

if (window.navigator.userAgent.indexOf("MSIE") >= 1) { // IE浏览器判断
        if (obj.select) {
            obj.select();
            var path = document.selection.createRange().text;
            alert(path);
            obj.removeAttribute("src");
            imgSrc = fileQuery.value;
            imgArr = imgSrc.split('.');
            strSrc = imgArr[imgArr.length - 1].toLowerCase();
            if (strSrc.localeCompare('jpg') === 0 || strSrc.localeCompare('jpeg') === 0 || strSrc.localeCompare('gif') === 0 || strSrc.localeCompare('png') === 0) {
                obj.setAttribute("src", transImg);
                obj.style.filter =
                    "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + path + "', sizingMethod='scale');"; // IE通过滤镜的方式实现图片显示
            } else {
                //try{
                throw new Error('File type Error! please image file upload..');
                //}catch(e){
                //  alert('name: ' + e.name + 'message: ' + e.message) ;
                //}
            }
        } else {
            // alert(fileQuery.value) ;
            imgSrc = fileQuery.value;
            imgArr = imgSrc.split('.');
            strSrc = imgArr[imgArr.length - 1].toLowerCase();
            if (strSrc.localeCompare('jpg') === 0 || strSrc.localeCompare('jpeg') === 0 || strSrc.localeCompare('gif') === 0 || strSrc.localeCompare('png') === 0) {
                obj.src = fileQuery.value;
            } else {
                //try{
                throw new Error('File type Error! please image file upload..');
                //}catch(e){
                //  alert('name: ' + e.name + 'message: ' + e.message) ;
                //}
            }

}

} else {
        var file = fileQuery.files[0];
        var reader = new FileReader();
        reader.onload = function(e) {

imgSrc = fileQuery.value;
            imgArr = imgSrc.split('.');
            strSrc = imgArr[imgArr.length - 1].toLowerCase();
            if (strSrc.localeCompare('jpg') === 0 || strSrc.localeCompare('jpeg') === 0 || strSrc.localeCompare('gif') === 0 || strSrc.localeCompare('png') === 0) {
                obj.setAttribute("src", e.target.result);
            } else {
                //try{
                throw new Error('File type Error! please image file upload..');
                //}catch(e){
                //  alert('name: ' + e.name + 'message: ' + e.message) ;
                //}
            }

// alert(e.target.result); 
        }
        reader.readAsDataURL(file);
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

pc端图片上传



代码描述：单个图片上传功能

pc端的图片上传功能

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

?肩借给你靠

相关代码

pc端图片上传

最新