我问之前是有查过的,Windows会因为文件权限不足导致无法上传文件,希望能针对这个问题详细了解一下处理方法。以及同步图片显示的方法。
2条回答 默认 最新
- Go 旅城通票 2021-09-01 18:04关注
示例代码如下,需要注意获取图片的src中的base64字符串(注意去掉data:image/jpeg;base64,这串开头内容)回发服务器,服务器解码base64保存为图片
<!doctype html> <meta charset="utf-8" /> <style> ul.list,ul.list li{margin:0;padding:0;list-style:none} ul.list li{margin-left:5px;width:200px;height:200px;display:inline-block;position:relative} ul.list li.choose{background:#f7f7f7;color:#adadad;line-height:200px;text-align:center;font-size:80px;overflow:hidden} ul.list li.choose input{font-size:200px;position:absolute;left:0;top:0;opacity:0} ul.list li img{height:100%;width:100%} ul.list li a.remove{position:absolute;right:5px;top:0;color:#f00;display:none;cursor:pointer} ul.list li:hover a.remove{display:block} #taMsg{resize:none;width:200px;height:200px;border:none;outline:none} </style> <textarea id="taMsg" placeholder="这一刻的想法..."></textarea> <ul class="list" id="list"> <li class="choose">+<input type="file" id="fl" accept="image/*" /></li> </ul> <input type="button" id="btnSubmit" value="提交" /> <script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script> <script> var comm = { compress: function (width, rate, img, isPng) {//压缩图片 var canvas = document.createElement('canvas'), c = canvas.getContext('2d'), height; var nw = img.naturalWidth, nh = img.naturalHeight; height = nh; if (nw > width) { height = Math.floor(width * nh / nw); } else width = nw canvas.width = width; canvas.height = height; c.drawImage(img, 0, 0, nw, nh, 0, 0, width, height); return canvas.toDataURL(isPng ? 'image/png' : 'image/jpeg', rate / 100); }, readFile: function (file, callback, width, rate) {//读取图片base64 var r = new FileReader(), img = new Image; r.onload = function (e) { img.onload = function () { callback && callback(comm.compress(width || 1200, rate || 70, img, file.type.indexOf('/png') != -1)); img.onload = img = r.onload = r = null; }; img.src = e.target.result; }; r.readAsDataURL(file); }, getBase64: function (f, callback, width, rate, failure) {//获取file文件,默认图片最大长度1200,超过压缩,可以传入width指定长度,rate:压缩比率,默认70 if (!f.files || !window.FileReader) { alert('请使用最新的浏览器如Chrome,IE11+浏览器访问此页面!'); throw 'No support H5 API el.files or FileReader' }; if (!f.files.length) { failure && failure(); return; } if (!f.files[0].type.startsWith('image/')) { failure && failure(); alert('请选择图片文件!'); return } comm.readFile(f.files[0], callback, width || 1200, rate || 70); } }; var list = $('#list'); $('#fl').change(function () { comm.getBase64(this, function (base64) { list.prepend('<li><img src="' + base64 + '"/><a class="remove">x</a></li>') }); }); list.on('click', 'a.remove', function () { if (confirm('确认删除?!')) $(this).closest('li').remove(); }); $('#btnSubmit').click(function () { var data = { imgs: [] }; data.msg = $('#taMsg').val();//其他附加值可以按照这个方法增加 if (data.msg == '') { alert('请输入想法!'); return;} data.imgs = list.find('img').map(function () { return this.src.split('base64,').pop() }).get();//获取图片base64内容,去掉开头的data:image/jpeg;base64,内容 $.ajax({ url: 'x.php', type: 'POST', data: data, complete: function (xhr) { alert('服务器返回内容\n\n'+xhr.responseText) } }); }); </script>
x.php,保存图片,写数据之类的操作自己加上
<?php function base64_image_content($base64_image_content,$path){ $new_file = $path."/".date('Ymd',time())."/"; if(!file_exists($new_file)){//检查是否有该文件夹,如果没有就创建,并给予最高权限 mkdir($new_file, 0700); } $new_file = $new_file.time().".jpg"; if (file_put_contents($new_file, base64_decode($base64_image_content)))return '/'.$new_file; return false; } $msg=$_POST["msg"]; $imgs=isset($_POST["imgs"])?$_POST["imgs"]:0;//注意是数组 $savefn=""; if($imgs){//有选择图片,保存 foreach($imgs as $img){ $savefn.=base64_image_content($img,"upload")."\n"; } } echo "msg:".$msg."\n\nimgs:".$savefn; ?>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 ubuntu子系统密码忘记
- ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
- ¥15 保护模式-系统加载-段寄存器
- ¥15 电脑桌面设定一个区域禁止鼠标操作
- ¥15 求NPF226060磁芯的详细资料
- ¥15 使用R语言marginaleffects包进行边际效应图绘制
- ¥20 usb设备兼容性问题
- ¥15 错误(10048): “调用exui内部功能”库命令的参数“参数4”不能接受空数据。怎么解决啊
- ¥15 安装svn网络有问题怎么办
- ¥15 vue2登录调用后端接口如何实现