整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
作者：極客小俊」
「 把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主」
咱們廢話不多說(shuō)直接上代碼案例素材!
首先準(zhǔn)備圖片素材 放入到你的demo案例下的img文件夾
當(dāng)然圖片你也可以用其他類(lèi)似的圖來(lái)代替也是可以的!
如圖
<div id="big">
<div class="box">
<div class="pic"><img src="img/bag.jpg" alt="" title=""/></div>
<div class="mask">
<h2>三用小巧思波士頓包</h2>
<p>印花波士頓包 復(fù)古波士頓包，手提單肩斜挎多用，印花PVC</p>
</div>
<div class="title">
<h2 class="sl"><span></span>全場(chǎng)2折起 印花波士頓包 專(zhuān)柜終身保養(yǎng)</h2>
<h3 class="sl"><i></i><span>搶全場(chǎng)2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
<div class="price">
<div class="zx_pr"><span>￥</span>659</div>
<div class="xl_yp">
<p><del>￥1998.00</del><span>退貨賠運(yùn)費(fèi)</span></p>
<p><strong>70</strong>件已付款</p>
</div>
<div class="buy">搶!</div>
</div>
</div>
</div>
<div class="box">
<div class="pic"><img src="img/bag3.jpg" alt="" title=""/></div>
<div class="mask">
<h2>豬年紀(jì)念款經(jīng)典牛皮水桶包</h2>
<p>豬年紀(jì)念款 經(jīng)典牛皮水桶包，自帶強(qiáng)大氣場(chǎng)</p>
</div>
<div class="title">
<h2 class="sl"><span></span>全場(chǎng)2折起 印花波士頓包 專(zhuān)柜終身保養(yǎng)</h2>
<h3 class="sl"><i></i><span>搶全場(chǎng)2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
<div class="price">
<div class="zx_pr"><span>￥</span>659</div>
<div class="xl_yp">
<p><del>￥1998.00</del><span>退貨賠運(yùn)費(fèi)</span></p>
<p><strong>70</strong>件已付款</p>
</div>
<div class="buy">搶!</div>
</div>
</div>
</div>
<div class="box">
<div class="pic"><img src="img/bag4.jpg" alt="" title=""/></div>
<div class="mask">
<h2>一包四用蜜蜂系列迷你小方包</h2>
<p>四用方盒包 一包四用蜜蜂系列迷你鏈條小方包</p>
</div>
<div class="title">
<h2 class="sl"><span></span>全場(chǎng)2折起 印花波士頓包 專(zhuān)柜終身保養(yǎng)</h2>
<h3 class="sl"><i></i><span>搶全場(chǎng)2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
<div class="price">
<div class="zx_pr"><span>￥</span>659</div>
<div class="xl_yp">
<p><del>￥1998.00</del><span>退貨賠運(yùn)費(fèi)</span></p>
<p><strong>70</strong>件已付款</p>
</div>
<div class="buy">搶!</div>
</div>
</div>
</div>
</div>*{
padding:0px;
margin:0px;
}
body{
font-family: '微軟雅黑';
}
.sl{
white-space: nowrap;
word-break: keep-all;
text-overflow: ellipsis;
}
#big{
width:950px;
height:416px;
margin:10px auto;
overflow: hidden;
}
#big>.box{
width:298px;
height:410px;
float: left;
position: relative;
overflow: hidden;
border:1px solid #ccc;
margin-left:19px;
}
#big>.box:first-child{
margin-left:0px;
}
#big>.box>.pic{
width:298px;
height:300px;
overflow: hidden;
}
#big>.box>.pic>img{
transition: all 500ms;
}
#big>.box:hover>.pic>img{
transform: scale(1.5);
}
#big>.box>.mask{
height:300px;
width:298px;
position: absolute;
left:-298px;
top:0px;
background:rgba(0,0,0,0.3);
transition: all 600ms;
color:#fff;
}
#big>.box>.mask>h2{
font-size: 18px;
margin:80px 0px 10px 10px;
}
#big>.box>.mask>p{
font-size: 12px;
margin:0px 0px 10px 10px;
}
#big>.box:hover>.mask{
left:0px;
}
#big>.box>.title>h2{
margin:10px auto;
width:288px;
height:20px;
line-height: 20px;
font-size: 14px;
color:#333;
overflow: hidden;
font-weight: normal;
}
#big>.box>.title>h2>span{
display: inline-block;
width:31px;
height:16px;
vertical-align: middle;
background: url('img/tu.png') no-repeat;
background-size:cover;
margin-right:5px;
}
#big>.box>.title>h3{
width:288px;
height:20px;
margin:0px auto;
font-size: 12px;
color:#666;
font-weight: 400;
}
#big>.box>.title>h3>i{
width:12px;
height:16px;
display: inline-block;
background:url('img/tu1.jpg') no-repeat;
vertical-align: middle;
}
#big>.box>.title>h3>span{
color:#f00;
margin:0 5px 0 5px;
}
#big>.box>.title>.price{
width:298px;
height:50px;
background:#e61414;
}
#big>.box>.title>.price>.zx_pr>span{
font-size: 20px;
}
#big>.box>.title>.price>.zx_pr{
width:83px;
height:50px;
line-height: 50px;
float: left;
margin-left:2px;
vertical-align: bottom;
font-size:38px;
color:#fff;
}
#big>.box>.title>.price>.buy{
width:56px;
height:50px;
line-height: 50px;
text-align: center;
background:url('img/tu3.png') no-repeat;
float:right;
color:#f00;
}
#big>.box>.title>.price>.xl_yp{
width:145px;
height:41px;
float: left;
margin:4px 0 0 8px;
font-size: 12px;
color:#fff;
}
#big>.box>.title>.price>.xl_yp>p>span{
margin-left:4px;
width:72px;
height:17px;
display: inline-block;
line-height: 17px;
text-align: center;
border-radius: 10px;
background:#ffb369;
}
#big>.box>.title>.price>.xl_yp>p:nth-child(2){
width:80px;
height:20px;
line-height: 20px;
text-align: center;
border-radius: 1px;
margin-top:5px;
background:rgba(0,0,0,0.2);
}
#big>.box>.title>.price>.xl_yp>p:nth-child(2)>strong{
margin-right: 5px;
font-size: 14px;
}如圖
"點(diǎn)贊" "??評(píng)論" "收藏"
大家的支持就是我堅(jiān)持創(chuàng)作下去的動(dòng)力!?
?如果以上內(nèi)容有任何錯(cuò)誤或者不準(zhǔn)確的地方，歡迎在下面 留個(gè)言指出、或者你有更好的想法，歡迎一起交流學(xué)習(xí)???????????
TML編輯器 復(fù)制WORD里面帶圖文的文章，圖片可以直接顯示，JSP – 支持WORD上傳的富文本編輯器，EWEBEDITOR 從WORD中復(fù)制內(nèi)容帶多張圖片，如何從WORD文檔復(fù)制公式到富文本編輯器，復(fù)制word圖片，從word中復(fù)制圖片,
從word中粘貼圖片，粘貼word內(nèi)容，粘貼word圖片，粘貼word圖文，復(fù)制粘貼word文檔，復(fù)制粘貼word圖片，復(fù)制粘貼word圖文，復(fù)制粘貼word內(nèi)容，
之前在網(wǎng)上找過(guò)相關(guān)的資料，論壇里面也有網(wǎng)友交流過(guò)，還加過(guò)不少Q(mào)Q群和微信群，但是結(jié)果都不太令人滿意。相關(guān)的文章提問(wèn)的人多，能夠給出方案的人少，能夠給出成熟產(chǎn)品的就更少了，說(shuō)的直接一點(diǎn)根本就沒(méi)有，純屬浪費(fèi)時(shí)間。要示例沒(méi)示例，要代碼沒(méi)代碼，根本就用不了，
有幾個(gè)方面的原因吧，一個(gè)是網(wǎng)上的資料提的一些都是開(kāi)源的方案，也不是說(shuō)開(kāi)源的方案不行，關(guān)鍵是提到的這些方案，公司項(xiàng)目組去評(píng)估發(fā)現(xiàn)聯(lián)系不到開(kāi)發(fā)人員，而且方案本身也停止更新了，處于沒(méi)有人維護(hù)的狀態(tài)，所以項(xiàng)目組這邊不太敢用。主要是之前在這塊也踩過(guò)坑。
客戶那邊也不差這點(diǎn)錢(qián)，之前公司項(xiàng)目組就是在這塊踩過(guò)坑，用了開(kāi)源的方案，客戶那邊提了一個(gè)新需求，但是由于項(xiàng)目組對(duì)產(chǎn)品本身并不熟悉，導(dǎo)致沒(méi)辦法進(jìn)行二次開(kāi)發(fā)。
從word中復(fù)制圖片和文字內(nèi)容，然后粘貼到web富文本編輯器中，粘貼后word圖片自動(dòng)上傳到web服務(wù)器中，自動(dòng)將圖片和文字HTML添加到編輯器中，保留word中的文字格式，文字顏色，字體，樣式，
用戶發(fā)布新聞的時(shí)候是從word里面復(fù)制圖片和文字，然后將word圖文內(nèi)容粘貼到web富文本編輯器中，希望能夠?qū)ord的圖片自動(dòng)上傳到服務(wù)器中，服務(wù)器地址能夠自定義，
后端的話需要支持任意開(kāi)發(fā)語(yǔ)言，比如ASP,ASP.NET,JSP,PHP,PYTHON等。只要是基于標(biāo)準(zhǔn)HTTP協(xié)議的都要支持。如果能夠不裝控件最好，視頻教程：https://www.ixigua.com/7233953214108795407
1.下載示例：
http://www.ncmem.com/webapp/wordpaster/versions.aspx
2.復(fù)制WordPaster插件目錄
3.引入插件文件
注意：不要重復(fù)引入jquery，如果您的項(xiàng)目已經(jīng)引入了jq，則不用再引入jq-1.4
4.在工具欄中增加插件按鈕
6.初始化控件
注意：
1.如果接口字段名稱(chēng)不是file，請(qǐng)配置FileFieldName。ueditor接口中使用的upfile字段
參考：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
2.如果接口返回JSON，請(qǐng)配置ImageMatch
參考：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
3.如果接口返回的圖片地址沒(méi)有域名，請(qǐng)配置ImageUrl
參考：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
4.如果接口有權(quán)限驗(yàn)證（登陸驗(yàn)證，SESSION驗(yàn)證），請(qǐng)配置COOKIE?；蛉∠麢?quán)限驗(yàn)證。
參考：http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3
效果
訂閱版報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAw70JsA8m
政企版報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwuqJtN30#/
年費(fèi)版報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwFouDIB4#/
OEM版報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwV00mQSY
產(chǎn)品源代碼：https://drive.weixin.qq.com/s?k=ACoAYgezAAwz13B5Tr
授權(quán)碼生成器：https://drive.weixin.qq.com/s?k=ACoAYgezAAwzYuEEY1
JavaScript中，您可以使用HTML5的<input type="file">元素來(lái)實(shí)現(xiàn)圖片上傳功能。
以下是一個(gè)簡(jiǎn)單的示例代碼，演示如何在JavaScript中上傳圖片：
HTML部分：
<input type="file" id="uploadInput">
<button onclick="uploadImage()">上傳圖片</button>
JavaScript部分：
function uploadImage() {
var fileInput = document.getElementById('uploadInput');
var file = fileInput.files[0];
if (file) {
var formData = new FormData();
formData.append('image', file);
// 發(fā)送圖片數(shù)據(jù)到服務(wù)器
// 這里可以使用XMLHttpRequest或fetch等方法發(fā)送請(qǐng)求
// 請(qǐng)根據(jù)您的需求選擇適當(dāng)?shù)姆椒? // 示例中使用XMLHttpRequest發(fā)送POST請(qǐng)求
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function() {
if (xhr.status === 200) {
// 上傳成功
console.log('圖片上傳成功');
} else {
// 上傳失敗
console.log('圖片上傳失敗');
}
};
xhr.send(formData);
}
}
API部分：
[HttpPost]
[RequestSizeLimit(5242880)]
public async Task<APIResult> upload(IFormCollection collection)
{
APIResult rtn = new APIResult();
if (collection == null)
{
rtn.code = -100;
rtn.msg = "圖片列表為空";
return rtn;
}
else
{
try
{
string file_path = "";
// 預(yù)處理 用戶參數(shù):用戶指定子路徑
string userPath = DateTime.Now.ToString("yyyy-MM-dd");
if (collection.ContainsKey("path"))
{
collection.TryGetValue("path", out Microsoft.Extensions.Primitives.StringValues val);
if (!val.Equals("undefined"))
{
userPath = val.ToString();
}
}
// 預(yù)處理 文件路徑
// 注意：這里可能會(huì)根據(jù)不同的環(huán)境來(lái) 修改 路徑前面是否需要添加 /
// 當(dāng)發(fā)現(xiàn)上傳不成功，目錄無(wú)法創(chuàng)建時(shí)，可以嘗試修改這里
file_path = $"upload/imgs/{userPath}/";
var uploadPath = Path.Combine(_webHostEnvironment.WebRootPath, file_path);
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
// 處理文件
FormFileCollection filelist = (FormFileCollection)collection.Files;
foreach (IFormFile file in filelist)
{
// 保存文件到磁盤(pán)
string name = file.FileName;
string FilePath = Path.Combine(uploadPath, name);
string type = Path.GetExtension(name);
using (var stream = System.IO.File.Create(FilePath))
{
await file.CopyToAsync(stream);
};
// 保存文件信息到表
Sys_File f = new Sys_File();
f.code = "image";
f.name = name;
f.file_type = type.Trim('.');
f.file_group = userPath;
f.file_path = $"/{file_path}{name}";
f.is_active = true;
f.memo = "";
f.createTime = DateTime.Now;
using (var dbctx = DBHelper.db)
{
await dbctx.AddAsync(f);
await dbctx.SaveChangesAsync();
};
// 返回消息，包含文件路徑
rtn.datas = $"/{file_path}{name}";
rtn.code = 100;
rtn.msg = "文件已保存！";
}
}
catch (Exception ex)
{
rtn.code = -200;
rtn.msg = "圖片保存失敗!";
Log4NetUnit.Instance.Log.Error("圖片保存失敗:" + ex.Message);
}
return rtn;
}
}在這個(gè)示例中，我們首先在HTML中創(chuàng)建了一個(gè)<input type="file">元素，用于選擇要上傳的圖片。
然后，我們?cè)贘avaScript中編寫(xiě)了一個(gè)uploadImage函數(shù)，該函數(shù)在點(diǎn)擊"上傳圖片"按鈕時(shí)觸發(fā)。
在uploadImage函數(shù)中，我們首先獲取到<input>元素，并從中獲取到用戶選擇的圖片文件。
然后，我們創(chuàng)建一個(gè)FormData對(duì)象，并將圖片文件添加到其中。
接下來(lái)，我們可以使用XMLHttpRequest或fetch等方法將圖片數(shù)據(jù)發(fā)送到服務(wù)器。
在示例中，我們使用XMLHttpRequest發(fā)送了一個(gè)POST請(qǐng)求，將圖片數(shù)據(jù)作為FormData發(fā)送到/upload端點(diǎn)。
您需要根據(jù)您的實(shí)際情況修改URL和請(qǐng)求方法。
當(dāng)請(qǐng)求完成時(shí)，我們可以根據(jù)響應(yīng)的狀態(tài)碼來(lái)判斷上傳是否成功。
在示例中，如果狀態(tài)碼為200，則表示上傳成功，否則表示上傳失敗。
請(qǐng)注意，由于安全性限制，JavaScript無(wú)法直接訪問(wèn)用戶的文件系統(tǒng)。
因此，用戶必須手動(dòng)選擇要上傳的文件。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
