js实现多图上传和预览(包含表单上传、ajax上传)

请在这里查看示例 ☞ h5Upload示例

包含的知识点有：(仅考虑手机端，pc兼容性不清，建议使用jquery版本的)

1.浏览器自带的表单上传(页面会跳转)

2.ajax上传(异步刷新、自动上传、可取消上传)

3.一次实现多图上传

4.上传前图片预览

5.base64图片应用

6.创建元素的简单封装

7.insertAfter的封装

7.ajax简单封装

8.手机端标准html书写

9.jquery实现相同功能且封装成jq插件，方便调用

10.jquery版本添加了文件类型筛选功能

原生js版本：

<!DOCTYPE html>
<html lang="en">
<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">    <link rel="shortcut icon" href="images/send.png" type="/image/x-icon">    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>    <script src="http://v3.faqrobot.org/hvb/com/js/jquery-1.11.3.min.js"></script>  <title>test</title>    <style>    * {    margin: 0;     padding: 0;    font-size: 0.04rem;    }    body, html {    width: 100%;    height: 100%;    }    body {    height: 3rem;    }    .head {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: .2rem;    background: red;    }  .upFileCtn {    width: 50%;    background: #3D3F40;    padding: 10px;    border-radius: 5px;    margin: 20px auto 5px auto;    position: relative;    text-align: center;  }      .upFileItem {  display: inline-block;  padding: 0 5px;  }  .upFileImg {  border: none;  max-height: 100px;  }  .upFileName {    color: #fff;    font-size: 12px;    text-align: center;    margin-bottom: 5px;    }    .upFileAbort {    position: absolute;    right: 0;    top: -10px;    background: #3D3F40;    color: #fff;    border-radius: 100px;    font-size: 12px;    padding: 4px;    cursor: pointer;    }    .upFileOuter {    height: 5px;    background: #1A1A1A;    position: relative;    border-radius: 5px;    overflow: hidden;    }    .upFileInner {    display: inline-block;    height: 100%;    background: #5E90D6;    position: absolute;    top: 0;    left: 0;    }    </style>
</head>
<body>    <form enctype="multipart/form-data" action="http://xxx/material/jQueryFileUpload" method="post">    <input type="file" name="file" class="upFile" multiple="multiple">    <input type="text" name="type" value="1">    <input type="submit" value="表单上传">    <input type="button" value="ajax上传">    </form>    <script>    window.onload = function() {   var winW = document.body.clientWidth,    htmlObj = document.querySelector('html');    htmlObj.style.fontSize = ((winW<750) ? winW : 750) +'px';    var file = document.querySelector('[type=file]');    var button = document.querySelector('[type=button]');    var text = document.querySelector('[type=text]');    var body = document.querySelector('body');    var fileData = [];//fileData 为数组  //自动上传    file.addEventListener('change', function() {    fileData = [];  for(var i=0,len=file.files.length; i<len; i++) {  fileData[i] = file.files[i];  }  triggerEvent(button, 'click');    });    button.addEventListener('click', function() {    if(!fileData[0]) {    return;    }    uploadFile({    url: '../../servlet/AQ?s=uf',    data: {    file: fileData,//fileData 为数组  },    loadstart: function(e, ran, xhr) {    var upFileCtn = createEl('div', {'id': ran, 'class': 'upFileCtn'}),    upFileAbort = createEl('span', {'class': 'upFileAbort'}),    upFileOuter = createEl('div', {'class': 'upFileOuter'}),    upFileInner = createEl('em', {'class': 'upFileInner'});  for(var i=0,len=fileData.length; i<len; i++) {  var upFileItem = createEl('div', {'class': 'upFileItem', 'size': fileData[i].size, 'hasRead': '0'}),  upFileName = createEl('p', {'class': 'upFileName'});  upFileName.innerText = fileData[i].name;    upFileItem.appendChild(upFileName);    upFileCtn.appendChild(upFileItem);    try {  var reader = new FileReader();//IE9-不支持  if(fileData[i].type.indexOf('image')+1) {//可预览  reader.readAsDataURL(fileData[i]);  reader.onload = function(e) {  var upFileImg = createEl('img', {  src: e.target.result,  class: 'upFileImg',  });  var upFileItems = document.querySelectorAll('.upFileItem');  var upFileNames = document.querySelectorAll('.upFileName');  for(var j=0,len=upFileItems.length; j<len; j++) {  if((e.total == upFileItems[j].getAttribute('size')) && !parseInt(upFileItems[j].getAttribute('hasRead'))) {  upFileItems[j].setAttribute('hasRead', '1')upFileItems[j].insertBefore(upFileImg, upFileNames[j]);  break;  }  }  }  }else {  var upFileImg = createEl('img', {  src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABYCAYAAABiQnDAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkI1Q0NBQjg1NUExNzExRTY5RTEzREZFNTRENzc4RkFGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkI1Q0NBQjg2NUExNzExRTY5RTEzREZFNTRENzc4RkFGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjVDQ0FCODM1QTE3MTFFNjlFMTNERkU1NEQ3NzhGQUYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjVDQ0FCODQ1QTE3MTFFNjlFMTNERkU1NEQ3NzhGQUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4+S+GgAAAGC0lEQVR42uyc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',  class: 'upFileImg',  });  upFileItem.insertBefore(upFileImg, upFileName);  }  }catch(e) {  console.log(e);  }  }  upFileAbort.innerText = '×';    upFileCtn.appendChild(upFileAbort);    upFileCtn.appendChild(upFileOuter);    upFileOuter.appendChild(upFileInner);    body.appendChild(upFileCtn);    //取消上传    document.querySelector('#'+ ran +' .upFileAbort').addEventListener('click', function() {    xhr.abort();    upFileCtn.remove();    });    file.value = null;//清空文件路径    },    progress: function(e, ran) {    if (e.lengthComputable) {    var upFileInner = document.querySelector('#'+ ran +' em');    upFileInner.style.width = e.loaded/e.total*100 +'%';    }    },    load: function(e, ran) {    var upFileCtn = document.querySelector('#'+ ran);    upFileCtn.remove();    var data = JSON.parse(e.currentTarget.response);    console.log(data);    }    });    });    //触发事件    function triggerEvent(el, event) {    if (document.createEventObject) {// IE浏览器支持fireEvent方法    var evt = document.createEventObject();    return el.fireEvent('on' + event, evt)    } else {// 其他标准浏览器使用dispatchEvent方法    var evt = document.createEvent('HTMLEvents');    evt.initEvent(event, true, true);// 事件类型，是否冒泡，是否阻止浏览器的默认行为    return ! el.dispatchEvent(evt);    }    };    //上传文件    function uploadFile(options) {    var form = new FormData(),//FormData 对象    ran = 'ran'+ Math.round(Math.random() * 10000);//唯一标识符    for(var key in options.data) {  var val = options.data[key];  if(val instanceof Array) {//hack数组对象  for(var i=0,len=val.length; i<len; i++) {  form.append(key, val[i]);//增加表单数据    }  }else {  form.append(key, val);//增加表单数据    }  }    //创建 - 非IE6 - 第一步    if (window.XMLHttpRequest) {    var xhr = new XMLHttpRequest();    } else { //IE6及其以下版本浏览器    var xhr = new ActiveXObject('Microsoft.XMLHTTP');    }    xhr.open("post", options.url, true);    //开始传输    xhr.addEventListener("loadstart", function(e) {    options.loadstart(e, ran, xhr);//xhr用于取消上传    });    //传输中    xhr.upload.addEventListener("progress", function(e) {    options.progress(e, ran);    });    //传输成功    xhr.addEventListener("load", function(e) {    options.load(e, ran);    });    xhr.send(form);    }    //请求    /*ajax({    url: "../../classes/listClasses",    data: {    m: 0,    },    success: function(data) {    console.log(data);    }    });*/    function ajax(options) {    options = options || {};    options.type = (options.type || "GET").toUpperCase();    options.dataType = options.dataType || "json";    var params = formatParams(options.data);    //创建 - 非IE6 - 第一步    if (window.XMLHttpRequest) {    var xhr = new XMLHttpRequest();    } else { //IE6及其以下版本浏览器    var xhr = new ActiveXObject('Microsoft.XMLHTTP');    }    //接收 - 第三步    xhr.onreadystatechange = function() {    if (xhr.readyState == 4) {    var status = xhr.status;    if (status >= 200 && status < 300) {    options.success && options.success(JSON.parse(xhr.responseText), xhr.responseXML);    } else {    options.fail && options.fail(status);    }    }    }    //连接 和 发送 - 第二步    if (options.type == "GET") {    xhr.open("GET", options.url + "?" + params, true);    xhr.send(null);    } else if (options.type == "POST") {    xhr.open("POST", options.url, true);    //设置表单提交时的内容类型    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");    xhr.send(params);    }    }    //格式化参数    function formatParams(data) {    var arr = [];    for (var key in data) {    arr.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));    }    arr.push(("v=" + Math.random()).replace(".", ""));    return arr.join("&");    }    //创建元素 createEl('span', {'id': ran, 'class': 'upFileOuter'})    function createEl(tagName, attrs, style, text) {    var el = document.createElement(tagName);    if (attrs) {    for (key in attrs) {    if (key == "className") {    el.className = attrs[key];    } else if (key == "id") {    el.id = attrs[key];    } else {    el.setAttribute(key, attrs[key]);    }    }    }    if (style) {    for (key in style) {    el.style[key] = style[key];    }    }    if (text) {    el.appendChild(document.createTextNode(text));    }    return el;    }    function insertAfter(newEl, targetEl) {  var parentEl = targetEl.parentNode;  if (parentEl.lastChild == targetEl) {  parentEl.appendChild(newEl);  } else {  parentEl.insertBefore(newEl, targetEl.nextSibling);  }  }  }    </script>
</body>
</html>

jquery版本(更完善，方便调用，兼容性IE10+)：

<!DOCTYPE html>
<html lang="en">
<head>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>    <script src="../js/jquery-1.11.3.min.js"></script>    <title>demo</title>      <style>      * {      margin: 0;       padding: 0;      }      body, html {      width: 100%;      height: 100%;      }      body {      height: 3rem;      }      .msgCtn {border: 1px solid red;border-radius: 5px;padding: 20px;}</style>
</head>
<body>      <p>请尽量上传大一点的文件，方便查看过程(图片资源会自动显示预览图)</p><input type="file" class="file" multiple="multiple">    <div class="msgCtn"></div>
<script>
/*
* 多图预览上传组件
* by vcxiaohan 2016/8/5
*
* 调用示例：
* H5_upload('../../servlet/AQ?s=uf', $('.file'), '', function(data) {
*    console.log(data);
* });
*/    //样式
$('head').append('<style>.upFileCtn{width:50%;background:#3d3f40;padding:10px;border-radius:5px;margin:20px auto 5px auto;position:relative;text-align:center}.upFileItem{display:inline-block;padding:0 5px}.upFileImg{border:0;max-height:100px}.upFileName{color:#fff;font-size:12px;text-align:center;margin-bottom:5px}.upFileAbort{position:absolute;right:0;top:-10px;background:#3d3f40;color:#fff;border-radius:100px;font-size:12px;padding:4px;cursor:pointer}.upFileOuter{height:5px;background:#1a1a1a;position:relative;border-radius:5px;overflow:hidden}.upFileInner{display:inline-block;height:100%;background:#5e90d6;position:absolute;top:0;left:0}</style>');
//无法预览base64
var base64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABYCAYAAABiQnDAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkI1Q0NBQjg1NUExNzExRTY5RTEzREZFNTRENzc4RkFGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkI1Q0NBQjg2NUExNzExRTY5RTEzREZFNTRENzc4RkFGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjVDQ0FCODM1QTE3MTFFNjlFMTNERkU1NEQ3NzhGQUYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjVDQ0FCODQ1QTE3MTFFNjlFMTNERkU1NEQ3NzhGQUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4+S+GgAAAGC0lEQVR42uyc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';
var fileData = [];//fileData 为数组    //上传方法
function H5_upload(url, maxNum, $trigger, $ctn, startcall, callback, type, typecall) {//url-上传接口 maxNum-单次最大上传数量 $trigger-触发上传的input $ctn-上传进度的显示框 startcall-开始上传时的回调 callback-上传结束后的回调  type-允许上传的文件格式，如：gif|jpeg|bmp|jpg|png typecall-不符合文件类型时的回调//自动上传    $trigger.on('change', function() {    fileData = [];  try {var len = maxNum ? (maxNum>$trigger[0].files.length?$trigger[0].files.length:maxNum) : $trigger[0].files.length;for(var i=0; i<len; i++) {//IE9-不支持files    fileData[i] = $trigger[0].files[i];  }  autoUpload(url, $trigger, $ctn, startcall, callback, type, typecall);}catch(e) {}});
}  //自动上传
function autoUpload(url, $trigger, $ctn, startcall, callback, type, typecall) {   if(!fileData[0]) {    return;    }    uploadFile({    url: url,   data: {    file: fileData,//fileData 为数组  },    beforeload: function(formData) {var noSuit = [];// 不符合类型的文件typeReg = new RegExp('\.'+ type, 'i');for(var key in formData) {  var val = formData[key];  if(val instanceof Array) {//hack数组对象 for(var i=0,len=val.length; i<len; i++) { if(typeReg.test(val[i].name)) {// 文件类型允许}else {// 文件类型禁止noSuit.push(val[i]);val[i] = [];}}  }}typecall && typecall(noSuit);  return formData;},loadstart: function(e, ran, xhr) {   startcall && startcall(ran);//开始时的回调var $upFileCtn = $('<div class="'+ ran +' upFileCtn"></div>'),  $upFileAbort = $('<span class="upFileAbort">x</span>'),  $upFileOuter = $('<div class="upFileOuter"></div>'),  $upFileInner = $('<em class="upFileInner"></em>');  for(var i=0,len=fileData.length; i<len; i++) { if(!(fileData[i] instanceof Array)) {var $upFileItem = $('<div class="upFileItem" size="'+ fileData[i].size +'"></div>'),  $upFileName = $('<p class="upFileName" size="'+ fileData[i].size +'" hasRead="0">'+ fileData[i].name +'</p>');  $upFileName.appendTo($upFileItem);  $upFileItem.appendTo($upFileCtn);  try {  var reader = new FileReader();//IE9-不支持FileReader  if(fileData[i].type.indexOf('image')+1) {//可预览  reader.readAsDataURL(fileData[i]);  reader.onload = function(e) {  var $upFileImg = $('<img class="upFileImg" src="'+ e.target.result +'">');  var $upFileName = $('.upFileName');  for(var j=0,len=$upFileName.length; j<len; j++) {  var $cur_upFileName = $upFileName.eq(j);  if((e.total==$cur_upFileName.attr('size')) && !parseInt($cur_upFileName.attr('hasRead'))) {  $cur_upFileName.attr('hasRead', '1').before($upFileImg);  break;  }  }  }  }else {  var $upFileImg = $('<img class="upFileImg" src="'+ base64 +'">');  $upFileImg.insertBefore($upFileName);  }  }catch(e) {}  }}  $upFileCtn.append($upFileAbort);    $upFileCtn.append($upFileOuter);    $upFileOuter.append($upFileInner);    ($ctn || $('body')).append($upFileCtn);  //取消上传    $upFileAbort.on('click', function() {  xhr.abort();    $upFileCtn.remove();  $('.FA_'+ ran).parents('.MN_ask').remove();});  $trigger[0].value = null;//清空文件路径    },    progress: function(e, ran, xhr) { if (e.lengthComputable) {    var $upFileInner = $('.'+ ran +' em');    $upFileInner.width(e.loaded/e.total*100 +'%');  }    },    load: function(e, ran) {    var $upFileCtn = $('.'+ ran).remove();  callback && callback(JSON.parse(e.currentTarget.response), ran);  }    });
}  //上传文件
function uploadFile(options) {    var form = new FormData(),//FormData 对象    ran = ('ran'+ Math.random()).replace(/\./, ''),//唯一标识符   formData = options.data;// 表单数据载体数组formData = options.beforeload(formData);var formLen = false;for(var key in formData) {  var val = formData[key];  if(val instanceof Array) {//hack数组对象  for(var i=0,len=val.length; i<len; i++) {  if(!(val[i] instanceof Array)) {form.append(key, val[i]);//增加表单数据   formLen = true;}}  }}if(formLen) {// 符合文件类型//创建 - 非IE6 - 第一步    if (window.XMLHttpRequest) {    var xhr = new XMLHttpRequest();    } else { //IE6及其以下版本浏览器    var xhr = new ActiveXObject('Microsoft.XMLHTTP');    }    xhr.open("post", options.url, true);    //开始传输    xhr.addEventListener("loadstart", function(e) {  options.loadstart(e, ran, xhr);//xhr用于取消上传    });    //传输中    xhr.upload.addEventListener("progress", function(e) {    options.progress(e, ran, xhr);    });    //传输成功    xhr.addEventListener("load", function(e) {    options.load(e, ran);    });    xhr.send(form);}
}
</script>      <script>    ;$(function() {    // 上线接口，请忽略$.ajax({url: '/servlet/AQ?s=p&sysNum=14464304598886414'})//调用示例    H5_upload('/servlet/AQ?s=uf', 10, $('.file'), $('.msgCtn'), function(ran) {//url-上传接口 maxNum-单次最大上传数量 $trigger-触发上传的input $ctn-上传进度的显示框 startcall-开始上传时的回调 callback-上传结束后的回调  type-允许上传的文件格式，如：gif|jpeg|bmp|jpg|png typecall-不符合文件类型时的回调$('.msgCtn').append('<br>开始上传时的展示框唯一标识：'+ ran);}, function(data, ran) {$('.msgCtn').append('<br>上传结束后的展示框唯一标识：'+ ran);$('.msgCtn').append('<br>后台返回数据：'+ JSON.stringify(data));}, 'png|jpg|mp3', function(noSuit) {if(noSuit[0]) {$('.msgCtn').append(noSuit.length +'个文件不符合图片类型，已忽略');}});    });
</script>
</body>
</html>

js实现多图上传和预览(包含表单上传、ajax上传)相关推荐

DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）
1.控件功能列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http:// ...
html ie8上传图片,图片上传本地预览兼容ie8
工作中遇到的,总结下来了,图片上传本地预览限制图片最大为2M 图片上传本地预览 #preview1{width:260px;height:190px;border:1px solid #000;ove ...
上传图片，多图上传，预览功能，js原生无依赖
最近很好奇前端的文件上传功能,因为公司要求做一个支持图片预览的图片上传插件,所以自己搜了很多相关的插件,虽然功能很多,但有些地方不能根据公司的想法去修改,而且需要依赖jQuery或Bootstrap库 ...
html + js实现多张图片上传、预览和删除
最近做毕业设计,其中有一部分需要做个网页展示效果,网页上需要进行图片的上传.然后去学习了下js,(上传到后台处理和上传后在网页上显示,这里是选择文件后在页面上显示图片). 部分实现参考了博主https ...
JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果很早以前在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html><head>< ...
ajax js图片上传到php,Ajax上传并预览图片（附代码）
这次给大家带来Ajax上传并预览图片(附代码),Ajax上传并预览图片的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 直接上最简单的一种 ajax 异步上传图片,并预览 html: 图片上 ...
form 表单 + HTML5(FileReader) +iframe 实现无刷新图片上传+图片预览效果
作为一个初入前端的菜鸟,最近因为一个无刷新上传图片问题走了很多弯路,所以在这里给大家分享一下,不足之处希望谅解.无刷新上传图片一般有两种方式,一种是 form 表单+iframe ,还有一种是 aja ...
Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...

js实现多图上传和预览(包含表单上传、ajax上传)

js实现多图上传和预览(包含表单上传、ajax上传)相关推荐

最新文章

热门文章